@depict-ai/ui 4.3.3 → 4.3.5

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.3";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "4.3.5";
 const $4e04be41243c3d80$var$transform_elements = sorted_cols_at_size => {
   const cols_at_size = [];
   for (let i = 0; i < sorted_cols_at_size.length; i++) {
@@ -1641,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;
@@ -1685,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,
@@ -4340,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="', '">', "</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
@@ -4430,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(), `depict plp recommendations${props.class ? ` ${$5vyXB$solidjsweb.escape(props.class, true)}` : ""}`, $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,
@@ -4687,7 +4698,7 @@ function $a5f3eaa1a24bbc1e$var$actualSetupModal() {
     closeModal: actually_close_modal_
   };
 }
-var $72f96c4782db0b1b$var$_tmpl$ = ["<div", ' class="depict recommendations">', "</div>"];
+var $72f96c4782db0b1b$var$_tmpl$ = ["<div", ' class="', '">', "</div>"];
 function $72f96c4782db0b1b$export$9574e176201e5e8d(props) {
   return $95837413165cc2df$export$23fca46f3143581f(() => {
     const grid_spacing_override = $5vyXB$solidjs.createMemo(() => {
@@ -4702,7 +4713,7 @@ function $72f96c4782db0b1b$export$9574e176201e5e8d(props) {
       };
     });
     const [recommendations_resource_] = $5vyXB$solidjs.createResource(() => props.recommendations, recs => recs);
-    return $5vyXB$solidjsweb.ssr($72f96c4782db0b1b$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $84798aaa863a4909$export$e68cff63f76bd15b), {
+    return $5vyXB$solidjsweb.ssr($72f96c4782db0b1b$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), `depict recommendations${props.class ? ` ${$5vyXB$solidjsweb.escape(props.class, true)}` : ""}`, $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $84798aaa863a4909$export$e68cff63f76bd15b), {
       get children() {
         return $363ce4d1d71041aa$export$d41d19e89346fa2({
           product_card_template_: (...args) => props.product_card_template(...args),

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.3";
+export const version = "4.3.5";
 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;
@@ -976,6 +987,7 @@ export function RecommendationGrid<T extends Display>(props: {
   };
   max_rows?: number;
   product_card_template: ProductCardTemplate<T>;
+  class?: string;
 }): HTMLDivElement;
 type ShopTheLookOpenModalOptions<T extends Display> = {
   onNavigation: OnNavigation;
@@ -1027,6 +1039,7 @@ export function RecommendationSlider<T extends Display>(props: {
   recommendations: Promise<T[]>;
   title?: JSX.Element;
   product_card_template: ProductCardTemplate<T>;
+  class?: string;
 }): HTMLDivElement;
 export function ExpandingDetails(props: {
   details_: HTMLDetailsElement;
@@ -1384,7 +1397,7 @@ type OpenModalParams<OriginalDisplay extends Display, OutputDisplay extends Mode
  * Open the modal with support for alignment.
  * @returns {void}
  */
-export const open_modal_with_alignment: <OriginalDisplay extends Display, OutputDisplay extends unknown>(openModalParams: OpenModalParams<OriginalDisplay, OutputDisplay>) => void;
+export const open_modal_with_alignment: <OriginalDisplay extends Display, OutputDisplay extends ModernDisplay>(openModalParams: OpenModalParams<OriginalDisplay, OutputDisplay>) => void;
 export function open_search_with_shift_slash(open_search: VoidFunction): () => void;
 export interface PageReplacer {
   readonly render_: () => Node_Array;
@@ -1462,5 +1475,5 @@ export function CategoryPage<OriginalDisplay extends Display, OutputDisplay exte
   content_blocks_by_row?: ContentBlocksByRow;
   layout?: PossibleLayout;
   filterModalParent_?: HTMLElement | ShadowRoot;
-}): import("@depict-ai/utilishared").Node_Array;
+}): import("@depict-ai/utilishared/latest").Node_Array;
 export type { SearchFilter } from "@depict-ai/types/api/SearchRequestV3";