@depict-ai/ui 4.3.2 → 4.3.4

package/server/latest/index.cjs

@@ -12,7 +12,7 @@ function $parcel$export(e, n, v, s) {
     configurable: true
   });
 }
-$parcel$export(module.exports, "LooksSlider", () => $072863633018e322$export$1935e6bdfc5ed8ce);
+$parcel$export(module.exports, "LooksSlider", () => $a3bbfa5fdaa39f3a$export$2c9f9bf2092486aa);
 $parcel$export(module.exports, "promiseSafeStructuredClone", () => $ac946c6b782bb900$export$83bb9af5671e1dbe);
 $parcel$export(module.exports, "preserve_items_in_history_dot_state", () => $d84fe647b84b5dc5$export$5162a71f252e6122);
 $parcel$export(module.exports, "prefixes_to_preserve_in_history_dot_state", () => $d84fe647b84b5dc5$export$3064e1e8c6513da3);
@@ -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.3.2";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "4.3.4";
 const $4e04be41243c3d80$var$transform_elements = sorted_cols_at_size => {
   const cols_at_size = [];
   for (let i = 0; i < sorted_cols_at_size.length; i++) {
@@ -1192,7 +1192,7 @@ var $1ae437d7d388a66e$var$_tmpl$ = ["<div", ' class="img-wrapper">', "</div>"],
 function $1ae437d7d388a66e$export$b73ed90f0ee50dc3({
   display_: display_,
   FavoriteButton_: FavoriteButton_,
-  isExpanded_: isExpanded_,
+  userWantsExpandedSignal_: [userWantsExpanded, setUserWantsExpanded],
   textFadeInAnimationRunning_: textFadeInAnimationRunning_,
   outerRef_: outerRef_,
   animationDuration_: animationDuration_,
@@ -1205,12 +1205,12 @@ function $1ae437d7d388a66e$export$b73ed90f0ee50dc3({
   });
   const imageUrl = $5vyXB$solidjs.createMemo(() => variantToUse()?.image_urls?.[0]);
   const [animationIsRunning, setAnimationIsRunning] = textFadeInAnimationRunning_;
-  const [isExpandedThrottledByOurEffectRun, setIsExpandedThrottledByOurEffectRun] = $5vyXB$solidjs.createSignal($5vyXB$solidjs.untrack(isExpanded_));
+  const [isExpandedThrottledByOurEffectRun, setIsExpandedThrottledByOurEffectRun] = $5vyXB$solidjs.createSignal($5vyXB$solidjs.untrack(userWantsExpanded));
   const [animationEffectExists, setAnimationEffectExists] = $5vyXB$solidjs.createSignal(false);
   const [salePrice] = $5vyXB$solidjs.createResource(() => variantToUse()?.sale_price);
   const [originalPrice] = $5vyXB$solidjs.createResource(() => variantToUse()?.original_price);
   const isOnSale = $5vyXB$solidjs.createMemo(() => !salePrice.loading && !originalPrice.loading && salePrice.latest !== originalPrice.latest); // .latest doesn't trigger suspense after the initial load
-  const enableLink = $5vyXB$solidjs.createMemo(() => isExpanded_() && !animationIsRunning());
+  const enableLink = $5vyXB$solidjs.createMemo(() => userWantsExpanded() && !animationIsRunning());
   const href = $5vyXB$solidjs.createMemo(() => variantToUse()?.page_url);
   const FavoriteButton = FavoriteButton_; // Just to get rid of the type error - TS doesn't understand <Show>
   return $5vyXB$solidjsweb.ssrElement("a", $5vyXB$solidjsweb.mergeProps({
@@ -1240,10 +1240,10 @@ function $1ae437d7d388a66e$export$b73ed90f0ee50dc3({
               return imageUrl();
             },
             get aspectRatio() {
-              return isExpanded_() ? 0.75 : 1;
+              return userWantsExpanded() ? 0.75 : 1;
             },
             get autoAdjustAspectRatio() {
-              return isExpanded_();
+              return userWantsExpanded();
             },
             imgProps: {
               keyRatioUpdating: true
@@ -1254,7 +1254,7 @@ function $1ae437d7d388a66e$export$b73ed90f0ee50dc3({
     }
   })), "<!--/-->", "<!--$-->", $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
     get when() {
-      return (animationEffectExists() ? isExpandedThrottledByOurEffectRun() : isExpanded_()) || animationIsRunning();
+      return (animationEffectExists() ? isExpandedThrottledByOurEffectRun() : userWantsExpanded()) || 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), {
@@ -1386,7 +1386,7 @@ var $905010a06f9aeae5$var$_tmpl$ = ["<div", ' class="scroll-padding">', "</div>"
 function $905010a06f9aeae5$export$ebf0b1d4f90c09ae({
   displays_: displays_,
   FavoriteButton_: FavoriteButton_,
-  userWantsExpandedSignal_: [userWantsExpanded, setUserWantsExpanded],
+  userWantsExpandedSignal_: userWantsExpandedSignal_,
   containerWidth_: containerWidth_,
   animationDuration_: animationDuration_,
   supportsHover_: supportsHover_,
@@ -1400,6 +1400,7 @@ 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;
+  const [userWantsExpanded, setUserWantsExpanded] = userWantsExpandedSignal_;
   $b9e830d616d01b31$export$7b9a0e99f0aeb2f3().then(is => isAffectedByChromeBug = is);
   return $5vyXB$solidjsweb.createComponent((0, $84798aaa863a4909$export$e68cff63f76bd15b), {
     get children() {
@@ -1426,7 +1427,7 @@ function $905010a06f9aeae5$export$ebf0b1d4f90c09ae({
                 animationDuration_: animationDuration_,
                 display_: display,
                 FavoriteButton_: FavoriteButton_,
-                isExpanded_: userWantsExpanded,
+                userWantsExpandedSignal_: userWantsExpandedSignal_,
                 textFadeInAnimationRunning_: textFadeInAnimationRunning,
                 priceFormatting_: priceFormatting_,
                 outerRef_: el => $5vyXB$solidjs.createEffect(() => {
@@ -1640,11 +1641,85 @@ class $e96dd13889871fc0$export$7e1297a3a19f10d8 {
     this.on_navigation_ = on_navigation;
   }
 }
-var $072863633018e322$var$_tmpl$ = ["<div", ' class="depict recommendations looks" style="', '">', "</div>"];
-let $072863633018e322$var$expandedLooksSignal_;
-function $072863633018e322$export$1935e6bdfc5ed8ce(props) {
+var $b8e79813f4f7ebe4$var$_tmpl$ = ["<button", ' class="show-more major" type="button">', "</button>"],
+  $b8e79813f4f7ebe4$var$_tmpl$2 = ["<h2", ' class="recs-title">', "</h2>"],
+  $b8e79813f4f7ebe4$var$_tmpl$3 = ["<div", ' class="recommendation-grid"><!--$-->', "<!--/--><!--$-->", "<!--/--></div>"];
+function $b8e79813f4f7ebe4$export$7da560f849543dff({
+  recommendations_resource_: recommendations_resource_,
+  product_card_template_: product_card_template_,
+  layout_options_: layout_options_,
+  title_: title_,
+  max_rows_: max_rows_,
+  view_more_button_: view_more_button_
+}) {
+  const rows_object_ = $5vyXB$solidjs.createMemo(() => {
+    const view_more_button = view_more_button_?.();
+    const max_rows = max_rows_?.();
+    if (!view_more_button) {
+      if (max_rows) return {
+        max_rows: max_rows
+      };
+      return "all";
+    }
+    return {
+      max_rows: max_rows,
+      start_rows: view_more_button.start_rows,
+      rows_per_click: view_more_button.rows_per_click ?? 2,
+      button: $5vyXB$solidjsweb.ssr($b8e79813f4f7ebe4$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape(view_more_button.text))
+    };
+  });
+  const is_showing_something = $5vyXB$solidjs.createMemo(() => recommendations_resource_.loading || recommendations_resource_()?.length);
+  const title = $5vyXB$solidjs.createMemo(() => title_?.()); // In case getter/accessor creates elements, don't create them twice
+  const num_placeholders_ = () => 20;
+  const elements = [$5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
+    get when() {
+      return title();
+    },
+    get children() {
+      return $5vyXB$solidjsweb.ssr($b8e79813f4f7ebe4$var$_tmpl$2, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape(title()));
+    }
+  }), $5vyXB$solidjsweb.ssr($b8e79813f4f7ebe4$var$_tmpl$3, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape($fc23d7668ae0011d$export$a2cc176055f8f08()), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $f48d0fbb00835aaa$export$d21e32dfedac04be), $5vyXB$solidjsweb.mergeProps({
+    get rows() {
+      return rows_object_();
+    },
+    layout: "grid",
+    element_attributes: {
+      class: "cards"
+    }
+  }, layout_options_, {
+    get children() {
+      return $5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Suspense), {
+        get fallback() {
+          return $0caf87eaa19079da$export$f33414a4df0afd3f({
+            num_placeholders_: num_placeholders_,
+            product_card_template_: product_card_template_
+          });
+        },
+        get children() {
+          return (() => {
+            // IIFE to make sure we access both the recommendations_resource and the resources containing the product card rendering results themselves within the Suspense boundary
+            const displays_by_key_ = $a73063cc642f3e5f$export$7f8bd308237ab5a5($5vyXB$solidjs.createMemo(() => recommendations_resource_() || []));
+            return $a73063cc642f3e5f$export$43f0fb951fcb0c54({
+              displays_by_key_: displays_by_key_,
+              product_card_template_: product_card_template_
+            });
+          })();
+        }
+      });
+    }
+  }))))];
+  return $5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
+    get when() {
+      return is_showing_something();
+    },
+    children: elements
+  });
+}
+var $a3bbfa5fdaa39f3a$var$_tmpl$ = ["<div", ' class="depict recommendations looks" style="', '">', "</div>"];
+let $a3bbfa5fdaa39f3a$var$expandedLooksSignal_;
+function $a3bbfa5fdaa39f3a$export$2c9f9bf2092486aa(props) {
   return $95837413165cc2df$export$23fca46f3143581f(() => {
-    $072863633018e322$var$expandedLooksSignal_ ||= $5vyXB$solidjs.createSignal(new Set(), {
+    $a3bbfa5fdaa39f3a$var$expandedLooksSignal_ ||= $5vyXB$solidjs.createSignal(new Set(), {
       equals: false
     });
     const expandingAnimationDuration = 240;
@@ -1684,38 +1759,49 @@ function $072863633018e322$export$1935e6bdfc5ed8ce(props) {
         market: market,
         locale: locale
       };
-      return $072863633018e322$var$runDisplayTransformersForLooks(baseData, listings, props.displayTransformers_);
+      return $a3bbfa5fdaa39f3a$var$runDisplayTransformersForLooks(baseData, listings, props.displayTransformers_);
     });
+    const sharedOptions = {
+      product_card_template_: display => $ad882bbe664dbd53$export$44809a8a3e867e30({
+        display_: display,
+        FavoriteButton_: props.FavoriteButton_,
+        placeholderImageAspectRatio_: props.imagePlaceholderAspectRatio_,
+        animationDuration_: expandingAnimationDuration,
+        expandedLooksSignal_: $a3bbfa5fdaa39f3a$var$expandedLooksSignal_,
+        priceFormatting_: () => props.priceFormatting_,
+        pseudoRouter_: pseudoRouter
+      }),
+      recommendations_resource_: looksResource,
+      title_: () => props.title_,
+      layout_options_: $5vyXB$solidjs.createMemo(() => ({
+        cols_at_size: $4e04be41243c3d80$export$6daf8749b65a1b77(props.columnsAtSize_),
+        ...grid_spacing_override()
+      }))
+    };
     $5vyXB$solidjs.createEffect(() => {
       const {
         onNavigation_: onNavigation_
       } = props;
       if (onNavigation_) pseudoRouter.on_navigation_ = onNavigation_;
     });
-    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), {
+    return $5vyXB$solidjsweb.ssr($a3bbfa5fdaa39f3a$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 => $ad882bbe664dbd53$export$44809a8a3e867e30({
-            display_: display,
-            FavoriteButton_: props.FavoriteButton_,
-            placeholderImageAspectRatio_: props.imagePlaceholderAspectRatio_,
-            animationDuration_: expandingAnimationDuration,
-            expandedLooksSignal_: $072863633018e322$var$expandedLooksSignal_,
-            priceFormatting_: () => props.priceFormatting_,
-            pseudoRouter_: pseudoRouter
-          }),
-          recommendations_resource_: looksResource,
-          title_: () => props.title_,
-          layout_options_: $5vyXB$solidjs.createMemo(() => ({
-            cols_at_size: $4e04be41243c3d80$export$6daf8749b65a1b77(props.columnsAtSize_),
-            ...grid_spacing_override()
-          }))
+        return $5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
+          get when() {
+            return props.gridOptions_;
+          },
+          get fallback() {
+            return $5vyXB$solidjsweb.createComponent((0, $363ce4d1d71041aa$export$d41d19e89346fa2), sharedOptions);
+          },
+          get children() {
+            return $5vyXB$solidjsweb.createComponent((0, $b8e79813f4f7ebe4$export$7da560f849543dff), $5vyXB$solidjsweb.mergeProps(sharedOptions, () => props.gridOptions_));
+          }
         });
       }
     })));
   }, "LookSlider failed");
 }
-async function $072863633018e322$var$runDisplayTransformersForLooks(baseData, listings, displayTransformers) {
+async function $a3bbfa5fdaa39f3a$var$runDisplayTransformersForLooks(baseData, listings, displayTransformers) {
   try {
     const {
       products: productTransformer,
@@ -4339,84 +4425,9 @@ const $0b23bfd073d9a4e8$export$b91cec6bdc6b32a1 = /*@__PURE__*/(() => {
 const $a3280f0aad997933$export$c3834fa86c616831 = [[4], [3, 1024], [2, 901]];
 const $a3280f0aad997933$export$864d304a0bc46829 = "2%";
 const $a3280f0aad997933$export$7bf543b9d9be2c22 = (0, $0b23bfd073d9a4e8$export$b91cec6bdc6b32a1);
-var $b8e79813f4f7ebe4$var$_tmpl$ = ["<h2", ' class="recs-title">', "</h2>"],
-  $b8e79813f4f7ebe4$var$_tmpl$2 = ["<div", ' class="recommendation-grid"><!--$-->', "<!--/--><!--$-->", "<!--/--></div>"];
-function $b8e79813f4f7ebe4$export$7da560f849543dff({
-  recommendations_resource_: recommendations_resource_,
-  product_card_template_: product_card_template_,
-  layout_options_: layout_options_,
-  rows_object_: rows_object_,
-  title_: title_
-}) {
-  const is_showing_something = $5vyXB$solidjs.createMemo(() => recommendations_resource_.loading || recommendations_resource_()?.length);
-  const title = $5vyXB$solidjs.createMemo(() => title_?.()); // In case getter/accessor creates elements, don't create them twice
-  const num_placeholders_ = () => 20;
-  const elements = [$5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
-    get when() {
-      return title();
-    },
-    get children() {
-      return $5vyXB$solidjsweb.ssr($b8e79813f4f7ebe4$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape(title()));
-    }
-  }), $5vyXB$solidjsweb.ssr($b8e79813f4f7ebe4$var$_tmpl$2, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape($fc23d7668ae0011d$export$a2cc176055f8f08()), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $f48d0fbb00835aaa$export$d21e32dfedac04be), $5vyXB$solidjsweb.mergeProps({
-    get rows() {
-      return rows_object_();
-    },
-    layout: "grid",
-    element_attributes: {
-      class: "cards"
-    }
-  }, layout_options_, {
-    get children() {
-      return $5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Suspense), {
-        get fallback() {
-          return $0caf87eaa19079da$export$f33414a4df0afd3f({
-            num_placeholders_: num_placeholders_,
-            product_card_template_: product_card_template_
-          });
-        },
-        get children() {
-          return (() => {
-            // IIFE to make sure we access both the recommendations_resource and the resources containing the product card rendering results themselves within the Suspense boundary
-            const displays_by_key_ = $a73063cc642f3e5f$export$7f8bd308237ab5a5($5vyXB$solidjs.createMemo(() => recommendations_resource_() || []));
-            return $a73063cc642f3e5f$export$43f0fb951fcb0c54({
-              displays_by_key_: displays_by_key_,
-              product_card_template_: product_card_template_
-            });
-          })();
-        }
-      });
-    }
-  }))))];
-  return $5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
-    get when() {
-      return is_showing_something();
-    },
-    children: elements
-  });
-}
-var $1f8dbf7e28b3eff2$var$_tmpl$ = ["<button", ' class="show-more major" type="button">', "</button>"],
-  $1f8dbf7e28b3eff2$var$_tmpl$2 = ["<div", ' class="depict plp recommendations">', "</div>"];
+var $1f8dbf7e28b3eff2$var$_tmpl$ = ["<div", ' class="depict plp recommendations">', "</div>"];
 function $1f8dbf7e28b3eff2$export$9756467d34d91cdb(props) {
   return $95837413165cc2df$export$23fca46f3143581f(() => {
-    const rows_object_ = $5vyXB$solidjs.createMemo(() => {
-      const {
-        view_more_button: view_more_button,
-        max_rows: max_rows
-      } = props;
-      if (!view_more_button) {
-        if (max_rows) return {
-          max_rows: max_rows
-        };
-        return "all";
-      }
-      return {
-        max_rows: max_rows,
-        start_rows: view_more_button.start_rows,
-        rows_per_click: view_more_button.rows_per_click ?? 2,
-        button: $5vyXB$solidjsweb.ssr($1f8dbf7e28b3eff2$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape(view_more_button.text))
-      };
-    });
     const grid_spacing_override = $5vyXB$solidjs.createMemo(() => {
       const {
         grid_spacing: grid_spacing
@@ -4429,10 +4440,11 @@ function $1f8dbf7e28b3eff2$export$9756467d34d91cdb(props) {
       };
     });
     const [recommendations_resource_] = $5vyXB$solidjs.createResource(() => props.recommendations, recs => recs);
-    return $5vyXB$solidjsweb.ssr($1f8dbf7e28b3eff2$var$_tmpl$2, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $84798aaa863a4909$export$e68cff63f76bd15b), {
+    return $5vyXB$solidjsweb.ssr($1f8dbf7e28b3eff2$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $84798aaa863a4909$export$e68cff63f76bd15b), {
       get children() {
         return $b8e79813f4f7ebe4$export$7da560f849543dff({
-          rows_object_: rows_object_,
+          max_rows_: () => props.max_rows,
+          view_more_button_: () => props.view_more_button,
           product_card_template_: (...args) => props.product_card_template(...args),
           recommendations_resource_: recommendations_resource_,
           title_: () => props.title,

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.3.2";
+export const version = "4.3.4";
 declare const LISTING_ID = "listingId";
 declare const EXTERNAL_ID = "externalId";
 type ScrollRestorationData = {
@@ -877,6 +877,17 @@ export function LooksSlider(props: {
     display_: Accessor<ModernDisplay | null | undefined>;
   }) => JSX.Element;
   displayTransformers_?: DisplayTransformers<ModernDisplay, ModernDisplayWithPageUrl<ModernDisplay>>;
+  /**
+   * If provided, will render as grid instead of slider
+   */
+  gridOptions_?: {
+    view_more_button?: {
+      text: string;
+      start_rows?: number;
+      rows_per_click?: number;
+    };
+    max_rows?: number;
+  };
   onNavigation_?: OnNavigation;
   priceFormatting_: plp_shared_i18n["price_formatting_"];
 }): HTMLDivElement;