@depict-ai/ui 4.3.3 → 4.3.5

package/ES10/index.cjs

@@ -18,7 +18,7 @@ function $parcel$export(e, n, v, s) {
 function $parcel$interopDefault(a) {
   return a && a.__esModule ? a.default : a;
 }
-$parcel$export(module.exports, "LooksSlider", () => $8446f782881fa12e$export$1935e6bdfc5ed8ce);
+$parcel$export(module.exports, "LooksSlider", () => $e57cd46536ad992e$export$2c9f9bf2092486aa);
 $parcel$export(module.exports, "promiseSafeStructuredClone", () => $400d96565bbbfe07$export$83bb9af5671e1dbe);
 $parcel$export(module.exports, "preserve_items_in_history_dot_state", () => $cfcd56242923775d$export$5162a71f252e6122);
 $parcel$export(module.exports, "prefixes_to_preserve_in_history_dot_state", () => $cfcd56242923775d$export$3064e1e8c6513da3);
@@ -100,7 +100,7 @@ $parcel$export(module.exports, "BreadCrumbs", () => $335c02c1241a9ca8$export$5b7
 $parcel$export(module.exports, "QuickLinks", () => $335c02c1241a9ca8$export$de035477d6fef996);
 $parcel$export(module.exports, "CategoryPage", () => $c10e33c4681f8c9b$export$e2bf8ce7779e827e);
 /*! Depict.ai search and product listing SDK */
-const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.3.3";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.3.5";
 const $5401a6698b0c0658$var$transform_elements = sorted_cols_at_size => {
   const cols_at_size = [];
   for (let i = 0; i < sorted_cols_at_size.length; i++) {
@@ -1954,11 +1954,105 @@ function $73014ff36186a4dd$var$_get_navigation_happened_promise2(is_replace) {
     (0, $52FdA$depictaiutilishared.instant_exec_on_suspect_history_change).add(handler);
   });
 }
-var $8446f782881fa12e$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class="depict recommendations looks"style=--animation-duration:240ms>`);
-let $8446f782881fa12e$var$expandedLooksSignal_;
-function $8446f782881fa12e$export$1935e6bdfc5ed8ce(props) {
+var $2c920813c92d6987$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<button class="show-more major"type=button>`),
+  $2c920813c92d6987$var$_tmpl$2 = /*#__PURE__*/$52FdA$solidjsweb.template(`<h2 class=recs-title>`),
+  $2c920813c92d6987$var$_tmpl$3 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=recommendation-grid><!$><!/><!$><!/>`);
+function $2c920813c92d6987$export$7da560f849543dff(_ref) {
+  let {
+    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_
+  } = _ref;
+  const rows_object_ = $52FdA$solidjs.createMemo(() => {
+    var _view_more_button$row;
+    const view_more_button = view_more_button_ === null || view_more_button_ === void 0 ? void 0 : view_more_button_();
+    const max_rows = max_rows_ === null || max_rows_ === void 0 ? void 0 : 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$row = view_more_button.rows_per_click) !== null && _view_more_button$row !== void 0 ? _view_more_button$row : 2,
+      button: (() => {
+        var _el$ = $52FdA$solidjsweb.getNextElement($2c920813c92d6987$var$_tmpl$);
+        $52FdA$solidjsweb.insert(_el$, () => view_more_button.text);
+        return _el$;
+      })()
+    };
+  });
+  const is_showing_something = $52FdA$solidjs.createMemo(() => {
+    var _recommendations_reso;
+    return recommendations_resource_.loading || ((_recommendations_reso = recommendations_resource_()) === null || _recommendations_reso === void 0 ? void 0 : _recommendations_reso.length);
+  });
+  const title = $52FdA$solidjs.createMemo(() => title_ === null || title_ === void 0 ? void 0 : title_()); // In case getter/accessor creates elements, don't create them twice
+  const num_placeholders_ = () => 20;
+  const elements = [$52FdA$solidjsweb.createComponent((0, $52FdA$solidjs.Show), {
+    get when() {
+      return title();
+    },
+    get children() {
+      var _el$2 = $52FdA$solidjsweb.getNextElement($2c920813c92d6987$var$_tmpl$2);
+      $52FdA$solidjsweb.insert(_el$2, title);
+      return _el$2;
+    }
+  }), (() => {
+    var _el$3 = $52FdA$solidjsweb.getNextElement($2c920813c92d6987$var$_tmpl$3),
+      _el$4 = _el$3.firstChild,
+      [_el$5, _co$] = $52FdA$solidjsweb.getNextMarker(_el$4.nextSibling),
+      _el$6 = _el$5.nextSibling,
+      [_el$7, _co$2] = $52FdA$solidjsweb.getNextMarker(_el$6.nextSibling);
+    $52FdA$solidjsweb.insert(_el$3, (0, $8edd3cf30d1fd8b4$export$a2cc176055f8f08), _el$5, _co$);
+    $52FdA$solidjsweb.insert(_el$3, $52FdA$solidjsweb.createComponent((0, $6c2c739b113a8ddf$export$d21e32dfedac04be), $52FdA$solidjsweb.mergeProps({
+      get rows() {
+        return rows_object_();
+      },
+      layout: "grid",
+      element_attributes: {
+        class: "cards"
+      }
+    }, layout_options_, {
+      get children() {
+        return $52FdA$solidjsweb.createComponent((0, $52FdA$solidjs.Suspense), {
+          get fallback() {
+            return $e3915574cfd3466c$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_ = $76012c4468a53d1f$export$7f8bd308237ab5a5($52FdA$solidjs.createMemo(() => recommendations_resource_() || []));
+              return $76012c4468a53d1f$export$43f0fb951fcb0c54({
+                displays_by_key_: displays_by_key_,
+                product_card_template_: product_card_template_
+              });
+            })();
+          }
+        });
+      }
+    })), _el$7, _co$2);
+    return _el$3;
+  })()];
+  return $52FdA$solidjsweb.createComponent((0, $52FdA$solidjs.Show), {
+    get when() {
+      return is_showing_something();
+    },
+    children: elements
+  });
+}
+var $e57cd46536ad992e$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class="depict recommendations looks"style=--animation-duration:240ms>`);
+let $e57cd46536ad992e$var$expandedLooksSignal_;
+function $e57cd46536ad992e$export$2c9f9bf2092486aa(props) {
   return $d05611ff6b8c8357$export$23fca46f3143581f(() => {
-    $8446f782881fa12e$var$expandedLooksSignal_ || ($8446f782881fa12e$var$expandedLooksSignal_ = $52FdA$solidjs.createSignal(new Set(), {
+    $e57cd46536ad992e$var$expandedLooksSignal_ || ($e57cd46536ad992e$var$expandedLooksSignal_ = $52FdA$solidjs.createSignal(new Set(), {
       equals: false
     }));
     const expandingAnimationDuration = 240;
@@ -2000,8 +2094,25 @@ function $8446f782881fa12e$export$1935e6bdfc5ed8ce(props) {
         market: market,
         locale: locale
       };
-      return $8446f782881fa12e$var$runDisplayTransformersForLooks(baseData, listings, props.displayTransformers_);
-    });
+      return $e57cd46536ad992e$var$runDisplayTransformersForLooks(baseData, listings, props.displayTransformers_);
+    });
+    const sharedOptions = {
+      product_card_template_: display => $47e3c3102c78121b$export$44809a8a3e867e30({
+        display_: display,
+        FavoriteButton_: props.FavoriteButton_,
+        placeholderImageAspectRatio_: props.imagePlaceholderAspectRatio_,
+        animationDuration_: expandingAnimationDuration,
+        expandedLooksSignal_: $e57cd46536ad992e$var$expandedLooksSignal_,
+        priceFormatting_: () => props.priceFormatting_,
+        pseudoRouter_: pseudoRouter
+      }),
+      recommendations_resource_: looksResource,
+      title_: () => props.title_,
+      layout_options_: $52FdA$solidjs.createMemo(() => ({
+        cols_at_size: $5401a6698b0c0658$export$6daf8749b65a1b77(props.columnsAtSize_),
+        ...grid_spacing_override()
+      }))
+    };
     $52FdA$solidjs.createEffect(() => {
       const {
         onNavigation_: onNavigation_
@@ -2009,25 +2120,19 @@ function $8446f782881fa12e$export$1935e6bdfc5ed8ce(props) {
       if (onNavigation_) pseudoRouter.on_navigation_ = onNavigation_;
     });
     return (() => {
-      var _el$ = $52FdA$solidjsweb.getNextElement($8446f782881fa12e$var$_tmpl$);
+      var _el$ = $52FdA$solidjsweb.getNextElement($e57cd46536ad992e$var$_tmpl$);
       $52FdA$solidjsweb.insert(_el$, $52FdA$solidjsweb.createComponent((0, $d067f3a30f047b41$export$e68cff63f76bd15b), {
         get children() {
-          return $236a257ee52e5414$export$d41d19e89346fa2({
-            product_card_template_: display => $47e3c3102c78121b$export$44809a8a3e867e30({
-              display_: display,
-              FavoriteButton_: props.FavoriteButton_,
-              placeholderImageAspectRatio_: props.imagePlaceholderAspectRatio_,
-              animationDuration_: expandingAnimationDuration,
-              expandedLooksSignal_: $8446f782881fa12e$var$expandedLooksSignal_,
-              priceFormatting_: () => props.priceFormatting_,
-              pseudoRouter_: pseudoRouter
-            }),
-            recommendations_resource_: looksResource,
-            title_: () => props.title_,
-            layout_options_: $52FdA$solidjs.createMemo(() => ({
-              cols_at_size: $5401a6698b0c0658$export$6daf8749b65a1b77(props.columnsAtSize_),
-              ...grid_spacing_override()
-            }))
+          return $52FdA$solidjsweb.createComponent((0, $52FdA$solidjs.Show), {
+            get when() {
+              return props.gridOptions_;
+            },
+            get fallback() {
+              return $52FdA$solidjsweb.createComponent((0, $236a257ee52e5414$export$d41d19e89346fa2), sharedOptions);
+            },
+            get children() {
+              return $52FdA$solidjsweb.createComponent((0, $2c920813c92d6987$export$7da560f849543dff), $52FdA$solidjsweb.mergeProps(sharedOptions, () => props.gridOptions_));
+            }
           });
         }
       }));
@@ -2035,7 +2140,7 @@ function $8446f782881fa12e$export$1935e6bdfc5ed8ce(props) {
     })();
   }, "LookSlider failed");
 }
-async function $8446f782881fa12e$var$runDisplayTransformersForLooks(baseData, listings, displayTransformers) {
+async function $e57cd46536ad992e$var$runDisplayTransformersForLooks(baseData, listings, displayTransformers) {
   try {
     const {
       products: productTransformer,
@@ -5592,104 +5697,9 @@ const $dc0bcefcc3486ebd$export$b91cec6bdc6b32a1 = /*@__PURE__*/(() => {
 const $33eed84f447aa0c0$export$c3834fa86c616831 = [[4], [3, 1024], [2, 901]];
 const $33eed84f447aa0c0$export$864d304a0bc46829 = "2%";
 const $33eed84f447aa0c0$export$7bf543b9d9be2c22 = (0, $dc0bcefcc3486ebd$export$b91cec6bdc6b32a1);
-var $2c920813c92d6987$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<h2 class=recs-title>`),
-  $2c920813c92d6987$var$_tmpl$2 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=recommendation-grid><!$><!/><!$><!/>`);
-function $2c920813c92d6987$export$7da560f849543dff(_ref) {
-  let {
-    recommendations_resource_: recommendations_resource_,
-    product_card_template_: product_card_template_,
-    layout_options_: layout_options_,
-    rows_object_: rows_object_,
-    title_: title_
-  } = _ref;
-  const is_showing_something = $52FdA$solidjs.createMemo(() => {
-    var _recommendations_reso;
-    return recommendations_resource_.loading || ((_recommendations_reso = recommendations_resource_()) === null || _recommendations_reso === void 0 ? void 0 : _recommendations_reso.length);
-  });
-  const title = $52FdA$solidjs.createMemo(() => title_ === null || title_ === void 0 ? void 0 : title_()); // In case getter/accessor creates elements, don't create them twice
-  const num_placeholders_ = () => 20;
-  const elements = [$52FdA$solidjsweb.createComponent((0, $52FdA$solidjs.Show), {
-    get when() {
-      return title();
-    },
-    get children() {
-      var _el$ = $52FdA$solidjsweb.getNextElement($2c920813c92d6987$var$_tmpl$);
-      $52FdA$solidjsweb.insert(_el$, title);
-      return _el$;
-    }
-  }), (() => {
-    var _el$2 = $52FdA$solidjsweb.getNextElement($2c920813c92d6987$var$_tmpl$2),
-      _el$3 = _el$2.firstChild,
-      [_el$4, _co$] = $52FdA$solidjsweb.getNextMarker(_el$3.nextSibling),
-      _el$5 = _el$4.nextSibling,
-      [_el$6, _co$2] = $52FdA$solidjsweb.getNextMarker(_el$5.nextSibling);
-    $52FdA$solidjsweb.insert(_el$2, (0, $8edd3cf30d1fd8b4$export$a2cc176055f8f08), _el$4, _co$);
-    $52FdA$solidjsweb.insert(_el$2, $52FdA$solidjsweb.createComponent((0, $6c2c739b113a8ddf$export$d21e32dfedac04be), $52FdA$solidjsweb.mergeProps({
-      get rows() {
-        return rows_object_();
-      },
-      layout: "grid",
-      element_attributes: {
-        class: "cards"
-      }
-    }, layout_options_, {
-      get children() {
-        return $52FdA$solidjsweb.createComponent((0, $52FdA$solidjs.Suspense), {
-          get fallback() {
-            return $e3915574cfd3466c$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_ = $76012c4468a53d1f$export$7f8bd308237ab5a5($52FdA$solidjs.createMemo(() => recommendations_resource_() || []));
-              return $76012c4468a53d1f$export$43f0fb951fcb0c54({
-                displays_by_key_: displays_by_key_,
-                product_card_template_: product_card_template_
-              });
-            })();
-          }
-        });
-      }
-    })), _el$6, _co$2);
-    return _el$2;
-  })()];
-  return $52FdA$solidjsweb.createComponent((0, $52FdA$solidjs.Show), {
-    get when() {
-      return is_showing_something();
-    },
-    children: elements
-  });
-}
-var $41227f10ad680afd$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<button class="show-more major"type=button>`),
-  $41227f10ad680afd$var$_tmpl$2 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class="depict plp recommendations">`);
+var $41227f10ad680afd$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<div>`);
 function $41227f10ad680afd$export$9756467d34d91cdb(props) {
   return $d05611ff6b8c8357$export$23fca46f3143581f(() => {
-    const rows_object_ = $52FdA$solidjs.createMemo(() => {
-      var _view_more_button$row;
-      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$row = view_more_button.rows_per_click) !== null && _view_more_button$row !== void 0 ? _view_more_button$row : 2,
-        button: (() => {
-          var _el$ = $52FdA$solidjsweb.getNextElement($41227f10ad680afd$var$_tmpl$);
-          $52FdA$solidjsweb.insert(_el$, () => view_more_button.text);
-          return _el$;
-        })()
-      };
-    });
     const grid_spacing_override = $52FdA$solidjs.createMemo(() => {
       const {
         grid_spacing: grid_spacing
@@ -5703,11 +5713,12 @@ function $41227f10ad680afd$export$9756467d34d91cdb(props) {
     });
     const [recommendations_resource_] = $52FdA$solidjs.createResource(() => props.recommendations, recs => recs);
     return (() => {
-      var _el$2 = $52FdA$solidjsweb.getNextElement($41227f10ad680afd$var$_tmpl$2);
-      $52FdA$solidjsweb.insert(_el$2, $52FdA$solidjsweb.createComponent((0, $d067f3a30f047b41$export$e68cff63f76bd15b), {
+      var _el$ = $52FdA$solidjsweb.getNextElement($41227f10ad680afd$var$_tmpl$);
+      $52FdA$solidjsweb.insert(_el$, $52FdA$solidjsweb.createComponent((0, $d067f3a30f047b41$export$e68cff63f76bd15b), {
         get children() {
           return $2c920813c92d6987$export$7da560f849543dff({
-            rows_object_: rows_object_,
+            max_rows_: () => props.max_rows,
+            view_more_button_: () => props.view_more_button,
             product_card_template_: function () {
               return props.product_card_template(...arguments);
             },
@@ -5720,7 +5731,8 @@ function $41227f10ad680afd$export$9756467d34d91cdb(props) {
           });
         }
       }));
-      return _el$2;
+      $52FdA$solidjsweb.effect(() => $52FdA$solidjsweb.className(_el$, "depict plp recommendations".concat(props.class ? " ".concat(props.class) : "")));
+      return _el$;
     })();
   }, "RecommendationGrid failed");
 }
@@ -6070,7 +6082,7 @@ function $3476012866dab42c$var$actualSetupModal() {
     closeModal: actually_close_modal_
   };
 }
-var $2badc30d7c6610e1$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class="depict recommendations">`);
+var $2badc30d7c6610e1$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<div>`);
 function $2badc30d7c6610e1$export$9574e176201e5e8d(props) {
   return $d05611ff6b8c8357$export$23fca46f3143581f(() => {
     const grid_spacing_override = $52FdA$solidjs.createMemo(() => {
@@ -6102,6 +6114,7 @@ function $2badc30d7c6610e1$export$9574e176201e5e8d(props) {
           });
         }
       }));
+      $52FdA$solidjsweb.effect(() => $52FdA$solidjsweb.className(_el$, "depict recommendations".concat(props.class ? " ".concat(props.class) : "")));
       return _el$;
     })();
   }, "RecommendationSlider failed");

package/ES10/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";