@depict-ai/ui 4.3.3 → 4.3.5

package/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++) {
@@ -1856,11 +1856,100 @@ class $e96dd13889871fc0$export$7e1297a3a19f10d8 {
     this.on_navigation_ = on_navigation;
   }
 }
-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) {
+var $b8e79813f4f7ebe4$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<button class="show-more major"type=button>`),
+  $b8e79813f4f7ebe4$var$_tmpl$2 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<h2 class=recs-title>`),
+  $b8e79813f4f7ebe4$var$_tmpl$3 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=recommendation-grid><!$><!/><!$><!/>`);
+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_ = $gVhhF$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: (() => {
+        var _el$ = $gVhhF$solidjsweb.getNextElement($b8e79813f4f7ebe4$var$_tmpl$);
+        $gVhhF$solidjsweb.insert(_el$, () => view_more_button.text);
+        return _el$;
+      })()
+    };
+  });
+  const is_showing_something = $gVhhF$solidjs.createMemo(() => recommendations_resource_.loading || recommendations_resource_()?.length);
+  const title = $gVhhF$solidjs.createMemo(() => title_?.()); // In case getter/accessor creates elements, don't create them twice
+  const num_placeholders_ = () => 20;
+  const elements = [$gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
+    get when() {
+      return title();
+    },
+    get children() {
+      var _el$2 = $gVhhF$solidjsweb.getNextElement($b8e79813f4f7ebe4$var$_tmpl$2);
+      $gVhhF$solidjsweb.insert(_el$2, title);
+      return _el$2;
+    }
+  }), (() => {
+    var _el$3 = $gVhhF$solidjsweb.getNextElement($b8e79813f4f7ebe4$var$_tmpl$3),
+      _el$4 = _el$3.firstChild,
+      [_el$5, _co$] = $gVhhF$solidjsweb.getNextMarker(_el$4.nextSibling),
+      _el$6 = _el$5.nextSibling,
+      [_el$7, _co$2] = $gVhhF$solidjsweb.getNextMarker(_el$6.nextSibling);
+    $gVhhF$solidjsweb.insert(_el$3, (0, $fc23d7668ae0011d$export$a2cc176055f8f08), _el$5, _co$);
+    $gVhhF$solidjsweb.insert(_el$3, $gVhhF$solidjsweb.createComponent((0, $f48d0fbb00835aaa$export$d21e32dfedac04be), $gVhhF$solidjsweb.mergeProps({
+      get rows() {
+        return rows_object_();
+      },
+      layout: "grid",
+      element_attributes: {
+        class: "cards"
+      }
+    }, layout_options_, {
+      get children() {
+        return $gVhhF$solidjsweb.createComponent((0, $gVhhF$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($gVhhF$solidjs.createMemo(() => recommendations_resource_() || []));
+              return $a73063cc642f3e5f$export$43f0fb951fcb0c54({
+                displays_by_key_: displays_by_key_,
+                product_card_template_: product_card_template_
+              });
+            })();
+          }
+        });
+      }
+    })), _el$7, _co$2);
+    return _el$3;
+  })()];
+  return $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
+    get when() {
+      return is_showing_something();
+    },
+    children: elements
+  });
+}
+var $a3bbfa5fdaa39f3a$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class="depict recommendations looks"style=--animation-duration:240ms>`);
+let $a3bbfa5fdaa39f3a$var$expandedLooksSignal_;
+function $a3bbfa5fdaa39f3a$export$2c9f9bf2092486aa(props) {
   return $95837413165cc2df$export$23fca46f3143581f(() => {
-    $072863633018e322$var$expandedLooksSignal_ ||= $gVhhF$solidjs.createSignal(new Set(), {
+    $a3bbfa5fdaa39f3a$var$expandedLooksSignal_ ||= $gVhhF$solidjs.createSignal(new Set(), {
       equals: false
     });
     const expandingAnimationDuration = 240;
@@ -1900,8 +1989,25 @@ 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_: $gVhhF$solidjs.createMemo(() => ({
+        cols_at_size: $4e04be41243c3d80$export$6daf8749b65a1b77(props.columnsAtSize_),
+        ...grid_spacing_override()
+      }))
+    };
     $gVhhF$solidjs.createEffect(() => {
       const {
         onNavigation_: onNavigation_
@@ -1909,25 +2015,19 @@ function $072863633018e322$export$1935e6bdfc5ed8ce(props) {
       if (onNavigation_) pseudoRouter.on_navigation_ = onNavigation_;
     });
     return (() => {
-      var _el$ = $gVhhF$solidjsweb.getNextElement($072863633018e322$var$_tmpl$);
+      var _el$ = $gVhhF$solidjsweb.getNextElement($a3bbfa5fdaa39f3a$var$_tmpl$);
       $gVhhF$solidjsweb.insert(_el$, $gVhhF$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_: $gVhhF$solidjs.createMemo(() => ({
-              cols_at_size: $4e04be41243c3d80$export$6daf8749b65a1b77(props.columnsAtSize_),
-              ...grid_spacing_override()
-            }))
+          return $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
+            get when() {
+              return props.gridOptions_;
+            },
+            get fallback() {
+              return $gVhhF$solidjsweb.createComponent((0, $363ce4d1d71041aa$export$d41d19e89346fa2), sharedOptions);
+            },
+            get children() {
+              return $gVhhF$solidjsweb.createComponent((0, $b8e79813f4f7ebe4$export$7da560f849543dff), $gVhhF$solidjsweb.mergeProps(sharedOptions, () => props.gridOptions_));
+            }
           });
         }
       }));
@@ -1935,7 +2035,7 @@ function $072863633018e322$export$1935e6bdfc5ed8ce(props) {
     })();
   }, "LookSlider failed");
 }
-async function $072863633018e322$var$runDisplayTransformersForLooks(baseData, listings, displayTransformers) {
+async function $a3bbfa5fdaa39f3a$var$runDisplayTransformersForLooks(baseData, listings, displayTransformers) {
   try {
     const {
       products: productTransformer,
@@ -5346,99 +5446,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$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<h2 class=recs-title>`),
-  $b8e79813f4f7ebe4$var$_tmpl$2 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=recommendation-grid><!$><!/><!$><!/>`);
-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 = $gVhhF$solidjs.createMemo(() => recommendations_resource_.loading || recommendations_resource_()?.length);
-  const title = $gVhhF$solidjs.createMemo(() => title_?.()); // In case getter/accessor creates elements, don't create them twice
-  const num_placeholders_ = () => 20;
-  const elements = [$gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
-    get when() {
-      return title();
-    },
-    get children() {
-      var _el$ = $gVhhF$solidjsweb.getNextElement($b8e79813f4f7ebe4$var$_tmpl$);
-      $gVhhF$solidjsweb.insert(_el$, title);
-      return _el$;
-    }
-  }), (() => {
-    var _el$2 = $gVhhF$solidjsweb.getNextElement($b8e79813f4f7ebe4$var$_tmpl$2),
-      _el$3 = _el$2.firstChild,
-      [_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, (0, $fc23d7668ae0011d$export$a2cc176055f8f08), _el$4, _co$);
-    $gVhhF$solidjsweb.insert(_el$2, $gVhhF$solidjsweb.createComponent((0, $f48d0fbb00835aaa$export$d21e32dfedac04be), $gVhhF$solidjsweb.mergeProps({
-      get rows() {
-        return rows_object_();
-      },
-      layout: "grid",
-      element_attributes: {
-        class: "cards"
-      }
-    }, layout_options_, {
-      get children() {
-        return $gVhhF$solidjsweb.createComponent((0, $gVhhF$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($gVhhF$solidjs.createMemo(() => recommendations_resource_() || []));
-              return $a73063cc642f3e5f$export$43f0fb951fcb0c54({
-                displays_by_key_: displays_by_key_,
-                product_card_template_: product_card_template_
-              });
-            })();
-          }
-        });
-      }
-    })), _el$6, _co$2);
-    return _el$2;
-  })()];
-  return $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
-    get when() {
-      return is_showing_something();
-    },
-    children: elements
-  });
-}
-var $1f8dbf7e28b3eff2$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<button class="show-more major"type=button>`),
-  $1f8dbf7e28b3eff2$var$_tmpl$2 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class="depict plp recommendations">`);
+var $1f8dbf7e28b3eff2$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div>`);
 function $1f8dbf7e28b3eff2$export$9756467d34d91cdb(props) {
   return $95837413165cc2df$export$23fca46f3143581f(() => {
-    const rows_object_ = $gVhhF$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: (() => {
-          var _el$ = $gVhhF$solidjsweb.getNextElement($1f8dbf7e28b3eff2$var$_tmpl$);
-          $gVhhF$solidjsweb.insert(_el$, () => view_more_button.text);
-          return _el$;
-        })()
-      };
-    });
     const grid_spacing_override = $gVhhF$solidjs.createMemo(() => {
       const {
         grid_spacing: grid_spacing
@@ -5452,11 +5462,12 @@ function $1f8dbf7e28b3eff2$export$9756467d34d91cdb(props) {
     });
     const [recommendations_resource_] = $gVhhF$solidjs.createResource(() => props.recommendations, recs => recs);
     return (() => {
-      var _el$2 = $gVhhF$solidjsweb.getNextElement($1f8dbf7e28b3eff2$var$_tmpl$2);
-      $gVhhF$solidjsweb.insert(_el$2, $gVhhF$solidjsweb.createComponent((0, $84798aaa863a4909$export$e68cff63f76bd15b), {
+      var _el$ = $gVhhF$solidjsweb.getNextElement($1f8dbf7e28b3eff2$var$_tmpl$);
+      $gVhhF$solidjsweb.insert(_el$, $gVhhF$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,
@@ -5467,7 +5478,8 @@ function $1f8dbf7e28b3eff2$export$9756467d34d91cdb(props) {
           });
         }
       }));
-      return _el$2;
+      $gVhhF$solidjsweb.effect(() => $gVhhF$solidjsweb.className(_el$, `depict plp recommendations${props.class ? ` ${props.class}` : ""}`));
+      return _el$;
     })();
   }, "RecommendationGrid failed");
 }
@@ -5801,7 +5813,7 @@ function $a5f3eaa1a24bbc1e$var$actualSetupModal() {
     closeModal: actually_close_modal_
   };
 }
-var $72f96c4782db0b1b$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class="depict recommendations">`);
+var $72f96c4782db0b1b$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div>`);
 function $72f96c4782db0b1b$export$9574e176201e5e8d(props) {
   return $95837413165cc2df$export$23fca46f3143581f(() => {
     const grid_spacing_override = $gVhhF$solidjs.createMemo(() => {
@@ -5831,6 +5843,7 @@ function $72f96c4782db0b1b$export$9574e176201e5e8d(props) {
           });
         }
       }));
+      $gVhhF$solidjsweb.effect(() => $gVhhF$solidjsweb.className(_el$, `depict recommendations${props.class ? ` ${props.class}` : ""}`));
       return _el$;
     })();
   }, "RecommendationSlider failed");

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.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";