@depict-ai/ui 4.2.0 → 4.2.1

package/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.1";
 const $4e04be41243c3d80$var$transform_elements = sorted_cols_at_size => {
   const cols_at_size = [];
   for (let i = 0; i < sorted_cols_at_size.length; i++) {
@@ -1310,15 +1310,18 @@ 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 = $gVhhF$solidjs.createMemo(() => {
+    const display = display_();
+    return display?.variant_displays[display?.variant_index];
+  });
+  const imageUrls = () => variantToUse()?.image_urls;
+  const imageUrl = $gVhhF$solidjs.createMemo(() => imageUrls()?.[0]);
+  const secondaryImageUrl = $gVhhF$solidjs.createMemo(() => imageUrls()?.[1]);
   const [animationIsRunning, setAnimationIsRunning] = textFadeInAnimationRunning_;
   const [isExpandedThrottledByOurEffectRun, setIsExpandedThrottledByOurEffectRun] = $gVhhF$solidjs.createSignal($gVhhF$solidjs.untrack(isExpanded_));
   const [animationEffectExists, setAnimationEffectExists] = $gVhhF$solidjs.createSignal(false);
-  const [salePrice] = $gVhhF$solidjs.createResource(() => variantToUse?.sale_price);
-  const [originalPrice] = $gVhhF$solidjs.createResource(() => variantToUse?.original_price);
+  const [salePrice] = $gVhhF$solidjs.createResource(() => variantToUse()?.sale_price);
+  const [originalPrice] = $gVhhF$solidjs.createResource(() => variantToUse()?.original_price);
   const isOnSale = $gVhhF$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 (() => {
@@ -1330,7 +1333,7 @@ function $1ae437d7d388a66e$export$b73ed90f0ee50dc3({
     var _ref$ = outerRef_;
     typeof _ref$ === "function" ? $gVhhF$solidjsweb.use(_ref$, _el$) : outerRef_ = _el$;
     $gVhhF$solidjsweb.spread(_el$, $gVhhF$solidjsweb.mergeProps(() => isExpanded_() && !animationIsRunning() ? {
-      href: variantToUse?.page_url
+      href: variantToUse()?.page_url
     } : {}), false, true);
     $gVhhF$solidjsweb.insert(_el$, $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
       when: imageUrl,
@@ -1345,20 +1348,38 @@ function $1ae437d7d388a66e$export$b73ed90f0ee50dc3({
           [_el$4, _co$] = $gVhhF$solidjsweb.getNextMarker(_el$3.nextSibling),
           _el$5 = _el$4.nextSibling,
           [_el$6, _co$2] = $gVhhF$solidjsweb.getNextMarker(_el$5.nextSibling);
-        $gVhhF$solidjsweb.insert(_el$2, $gVhhF$solidjsweb.createComponent((0, $d212a67662c5cf38$export$9d4a4b669b1929ab), {
-          src: imageUrl,
-          get aspectRatio() {
-            return isExpanded_() ? 0.75 : 1;
+        $gVhhF$solidjsweb.insert(_el$2, $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
+          get when() {
+            return imageUrl();
+          },
+          get fallback() {
+            return $gVhhF$solidjsweb.createComponent((0, $3bc4a89b971a3af5$export$3f37af283f8fb843), {
+              aspectRatio: 1
+            });
           },
-          get autoAdjustAspectRatio() {
-            return isExpanded_() ? "smoothed" : false;
+          get children() {
+            return $gVhhF$solidjsweb.createComponent((0, $d212a67662c5cf38$export$9d4a4b669b1929ab), {
+              get src() {
+                return imageUrl();
+              },
+              get aspectRatio() {
+                return isExpanded_() ? 0.75 : 1;
+              },
+              get autoAdjustAspectRatio() {
+                return isExpanded_() ? "smoothed" : false;
+              }
+            });
           }
         }), _el$4, _co$);
         $gVhhF$solidjsweb.insert(_el$2, $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
-          when: secondaryImageUrl,
+          get when() {
+            return secondaryImageUrl();
+          },
           get children() {
             return $gVhhF$solidjsweb.createComponent((0, $d212a67662c5cf38$export$9d4a4b669b1929ab), {
-              src: secondaryImageUrl,
+              get src() {
+                return secondaryImageUrl();
+              },
               get aspectRatio() {
                 return isExpanded_() ? 0.75 : 1;
               },
@@ -1417,12 +1438,12 @@ function $1ae437d7d388a66e$export$b73ed90f0ee50dc3({
             disconnector();
           }));
         }, _el$7);
-        $gVhhF$solidjsweb.insert(_el$9, () => variantToUse?.title ?? $gVhhF$solidjsweb.createComponent((0, $061ff5b4c3d36171$export$89c6019e4baa40b1), {
+        $gVhhF$solidjsweb.insert(_el$9, () => variantToUse()?.title ?? $gVhhF$solidjsweb.createComponent((0, $061ff5b4c3d36171$export$89c6019e4baa40b1), {
           height: "1em",
           width: "20ch"
         }));
         $gVhhF$solidjsweb.insert(_el$10, (() => {
-          var _c$ = $gVhhF$solidjsweb.memo(() => !!(!variantToUse || salePrice.loading));
+          var _c$ = $gVhhF$solidjsweb.memo(() => !!(!variantToUse() || salePrice.loading));
           return () => _c$() ? $gVhhF$solidjsweb.createComponent((0, $061ff5b4c3d36171$export$89c6019e4baa40b1), {
             height: "1em",
             width: "20ch"
@@ -1435,7 +1456,7 @@ function $1ae437d7d388a66e$export$b73ed90f0ee50dc3({
           get children() {
             var _el$11 = $gVhhF$solidjsweb.getNextElement($1ae437d7d388a66e$var$_tmpl$2);
             $gVhhF$solidjsweb.insert(_el$11, (() => {
-              var _c$2 = $gVhhF$solidjsweb.memo(() => !!(!variantToUse || originalPrice.loading));
+              var _c$2 = $gVhhF$solidjsweb.memo(() => !!(!variantToUse() || originalPrice.loading));
               return () => _c$2() ? $gVhhF$solidjsweb.createComponent((0, $061ff5b4c3d36171$export$89c6019e4baa40b1), {
                 height: "1em",
                 width: "20ch"
@@ -1502,7 +1523,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) {
@@ -1526,19 +1547,16 @@ 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 = $gVhhF$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 $gVhhF$solidjsweb.createComponent((0, $84798aaa863a4909$export$e68cff63f76bd15b), {
     get children() {
       return $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
         get when() {
-          return containerWidth_();
+          return containerWidth_() || !displays_;
         },
         get children() {
           var _el$ = $gVhhF$solidjsweb.getNextElement($905010a06f9aeae5$var$_tmpl$),
             _el$2 = _el$.firstChild;
-          $gVhhF$solidjsweb.addEventListener(_el$2, "mouseleave", $gVhhF$depictaiutilishared.catchify(() => supportsHover_() && setUserWantsExpanded(false)));
-          $gVhhF$solidjsweb.addEventListener(_el$2, "mouseenter", $gVhhF$depictaiutilishared.catchify(() => supportsHover_() && setUserWantsExpanded(true)));
           $gVhhF$solidjsweb.use(el => $gVhhF$solidjs.createEffect(() => {
             if (userWantsExpanded()) return;
             if (isAffectedByChromeBug) {
@@ -1550,35 +1568,45 @@ function $905010a06f9aeae5$export$ebf0b1d4f90c09ae({
               behavior: "smooth"
             });
           }), _el$2);
-          $gVhhF$solidjsweb.insert(_el$2, $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.For), {
-            each: displays_,
-            children: (display, index) => $gVhhF$solidjsweb.createComponent((0, $1ae437d7d388a66e$export$b73ed90f0ee50dc3), {
-              animationDuration_: animationDuration_,
-              display_: display,
-              FavoriteButton_: FavoriteButton_,
-              isExpanded_: userWantsExpanded,
-              textFadeInAnimationRunning_: textFadeInAnimationRunning,
-              outerRef_: el => $gVhhF$solidjs.createEffect(() => {
-                if (index() !== 0) return;
-                const resizeObserver = new ResizeObserver($gVhhF$depictaiutilishared.catchify(records => setLookItemHeight(records.at(-1).contentRect.height)));
-                resizeObserver.observe(el);
-                $gVhhF$solidjs.onCleanup(() => resizeObserver.disconnect());
-              })
-            })
+          $gVhhF$solidjsweb.spread(_el$2, $gVhhF$solidjsweb.mergeProps({
+            get classList() {
+              return {
+                expanded: userWantsExpanded(),
+                "resting-fully-expanded": !getSecondPartAnimationRunning() && userWantsExpanded()
+              };
+            },
+            get onMouseEnter() {
+              return $gVhhF$depictaiutilishared.catchify(() => supportsHover_() && setUserWantsExpanded(true));
+            },
+            get onMouseLeave() {
+              return $gVhhF$depictaiutilishared.catchify(() => supportsHover_() && setUserWantsExpanded(false));
+            }
+          }, () => displays_ && {
+            style: `--look-card-width:${containerWidth_()}px;--look-item-height:${lookItemHeight() || 200}px`
+          }), false, true);
+          $gVhhF$solidjsweb.insert(_el$2, $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Index), {
+            get each() {
+              return displays_ || Array.from({
+                length: 4
+              });
+            },
+            children: (display, index) => {
+              return $gVhhF$solidjsweb.createComponent((0, $1ae437d7d388a66e$export$b73ed90f0ee50dc3), {
+                animationDuration_: animationDuration_,
+                display_: display,
+                FavoriteButton_: FavoriteButton_,
+                isExpanded_: userWantsExpanded,
+                textFadeInAnimationRunning_: textFadeInAnimationRunning,
+                outerRef_: el => $gVhhF$solidjs.createEffect(() => {
+                  if (index !== 0) return;
+                  const resizeObserver = new ResizeObserver($gVhhF$depictaiutilishared.catchify(records => setLookItemHeight(records.at(-1).contentRect.height)));
+                  resizeObserver.observe(el);
+                  $gVhhF$solidjs.onCleanup(() => resizeObserver.disconnect());
+                })
+              });
+            }
           }));
-          $gVhhF$solidjsweb.effect(_p$ => {
-            var _v$ = `--look-card-width:${containerWidth_()}px;--look-item-height:${lookItemHeight() || 200}px`,
-              _v$2 = !!userWantsExpanded(),
-              _v$3 = !!(!getSecondPartAnimationRunning() && userWantsExpanded());
-            _p$.e = $gVhhF$solidjsweb.style(_el$2, _v$, _p$.e);
-            _v$2 !== _p$.t && _el$2.classList.toggle("expanded", _p$.t = _v$2);
-            _v$3 !== _p$.a && _el$2.classList.toggle("resting-fully-expanded", _p$.a = _v$3);
-            return _p$;
-          }, {
-            e: undefined,
-            t: undefined,
-            a: undefined
-          });
+          $gVhhF$solidjsweb.runHydrationEvents();
           return _el$;
         }
       });
@@ -1605,20 +1633,25 @@ 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$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=look-card style=--animation-duration:300ms>`);
-function $ad882bbe664dbd53$export$44809a8a3e867e30(display, info, FavoriteButton_) {
+var $ad882bbe664dbd53$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=look-card>`);
+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_ = $gVhhF$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 = (() => {
     var _el$ = $gVhhF$solidjsweb.getNextElement($ad882bbe664dbd53$var$_tmpl$);
     $gVhhF$solidjsweb.addEventListener(_el$, "click", $gVhhF$depictaiutilishared.catchify(() => setUserWantsExpanded(prev => !prev)), true);
+    _el$.classList.toggle("placeholder", !!!display_);
     $gVhhF$solidjsweb.runHydrationEvents();
     return _el$;
   })();
@@ -1632,7 +1665,7 @@ function $ad882bbe664dbd53$export$44809a8a3e867e30(display, info, FavoriteButton
   });
   addEventListener("click", clickHandler);
   $gVhhF$solidjs.onCleanup(() => removeEventListener("click", clickHandler));
-  $gVhhF$solidjs.createEffect(() => setExpandedLooks?.(prev => {
+  $gVhhF$solidjs.createEffect(() => setExpandedLooks(prev => {
     if (userWantsExpanded()) {
       // Close the other expanded looks
       prev.clear();
@@ -1642,42 +1675,42 @@ function $ad882bbe664dbd53$export$44809a8a3e867e30(display, info, FavoriteButton
     return prev;
   }));
   // Close us if another look expands
-  $gVhhF$solidjs.createEffect(() => expandedLooks_ && !expandedLooks_().has(us) && setUserWantsExpanded(false));
-  $gVhhF$solidjsweb.insert(container, () => $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
-    when: display,
+  $gVhhF$solidjs.createEffect(() => !expandedLooks_().has(us) && setUserWantsExpanded(false));
+  $gVhhF$solidjsweb.insert(container, () => [$gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
+    when: display_,
     get fallback() {
       return $gVhhF$solidjsweb.createComponent((0, $3bc4a89b971a3af5$export$3f37af283f8fb843), {
-        width: "100%",
-        height: "100%"
+        aspectRatio: placeholderImageAspectRatio_
       });
     },
     get children() {
-      return [$gVhhF$solidjsweb.createComponent((0, $d212a67662c5cf38$export$9d4a4b669b1929ab), {
+      return $gVhhF$solidjsweb.createComponent((0, $d212a67662c5cf38$export$9d4a4b669b1929ab), {
         src: coverImage,
-        aspectRatio: 0.75,
+        aspectRatio: placeholderImageAspectRatio_,
         autoAdjustAspectRatio: true
-      }), $gVhhF$solidjsweb.createComponent((0, $905010a06f9aeae5$export$ebf0b1d4f90c09ae), {
-        get displays_() {
-          return display?.displays;
-        },
-        userWantsExpandedSignal_: useWantsExpandedSignal_,
-        containerWidth_: containerWidth_,
-        animationDuration_: animationDuration_,
-        supportsHover_: supportsHover_,
-        FavoriteButton_: FavoriteButton_
-      })];
+      });
     }
-  }));
+  }), $gVhhF$solidjsweb.createComponent((0, $905010a06f9aeae5$export$ebf0b1d4f90c09ae), {
+    get displays_() {
+      return display_?.displays;
+    },
+    userWantsExpandedSignal_: useWantsExpandedSignal_,
+    containerWidth_: containerWidth_,
+    animationDuration_: animationDuration_,
+    supportsHover_: supportsHover_,
+    FavoriteButton_: FavoriteButton_
+  })]);
   return container;
 }
 $gVhhF$solidjsweb.delegateEvents(["click"]);
-var $072863633018e322$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class="depict recommendations looks">`);
+var $072863633018e322$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class="depict recommendations looks"style=--animation-duration:240ms>`);
 let $072863633018e322$var$expandedLooksSignal_;
 function $072863633018e322$export$1935e6bdfc5ed8ce(props) {
   return $95837413165cc2df$export$23fca46f3143581f(() => {
     $072863633018e322$var$expandedLooksSignal_ ||= $gVhhF$solidjs.createSignal(new Set(), {
       equals: false
     });
+    const expandingAnimationDuration = 240;
     const grid_spacing_override = $gVhhF$solidjs.createMemo(() => {
       const {
         gridSpacing_: gridSpacing_
@@ -1712,10 +1745,13 @@ function $072863633018e322$export$1935e6bdfc5ed8ce(props) {
       $gVhhF$solidjsweb.insert(_el$, $gVhhF$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_: $gVhhF$solidjs.createMemo(() => ({

package/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.1";
 declare const LISTING_ID = "listingId";
 declare const EXTERNAL_ID = "externalId";
 type ScrollRestorationData = {
@@ -249,6 +249,7 @@ export function LooksSlider(props: {
   merchant_: string;
   market_: string;
   locale_: string;
+  imagePlaceholderAspectRatio_: number | string;
   title_?: JSX.Element;
   FavoriteButton_?: (props: {
     display_: ModernDisplay | null | undefined;