@depict-ai/ui 4.3.3 → 4.3.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depict-ai/ui",
-  "version": "4.3.3",
+  "version": "4.3.5",
   "description": "Base package containing the actual UI of Depict UI along with translations, with a not-simplified API. We recommend using @depict-ai/js-ui or @depict-ai/react-ui instead.",
   "packageManager": "yarn@3.2.2",
   "sass": "styles.scss",
@@ -236,7 +236,7 @@
     "@babel/plugin-transform-typescript": "^7.22.9",
     "@babel/runtime": "latest",
     "@babel/runtime-corejs3": "^7.22.6",
-    "@depict-ai/plp-styling": "^3.2.0",
+    "@depict-ai/plp-styling": "^3.3.1",
     "@depict-ai/types": "^5.1.1",
     "@depict-ai/utilishared": "^2.1.1",
     "solid-js": "^1.8.12"

package/server/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++) {
@@ -1724,11 +1724,90 @@ function $73014ff36186a4dd$var$_get_navigation_happened_promise2(is_replace) {
     (0, $3hooq$depictaiutilishared.instant_exec_on_suspect_history_change).add(handler);
   });
 }
-var $8446f782881fa12e$var$_tmpl$ = ["<div", ' class="depict recommendations looks" style="', '">', "</div>"];
-let $8446f782881fa12e$var$expandedLooksSignal_;
-function $8446f782881fa12e$export$1935e6bdfc5ed8ce(props) {
+var $2c920813c92d6987$var$_tmpl$ = ["<button", ' class="show-more major" type="button">', "</button>"],
+  $2c920813c92d6987$var$_tmpl$2 = ["<h2", ' class="recs-title">', "</h2>"],
+  $2c920813c92d6987$var$_tmpl$3 = ["<div", ' class="recommendation-grid"><!--$-->', "<!--/--><!--$-->", "<!--/--></div>"];
+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_ = $3hooq$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: $3hooq$solidjsweb.ssr($2c920813c92d6987$var$_tmpl$, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.escape(view_more_button.text))
+    };
+  });
+  const is_showing_something = $3hooq$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 = $3hooq$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 = [$3hooq$solidjsweb.createComponent((0, $3hooq$solidjs.Show), {
+    get when() {
+      return title();
+    },
+    get children() {
+      return $3hooq$solidjsweb.ssr($2c920813c92d6987$var$_tmpl$2, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.escape(title()));
+    }
+  }), $3hooq$solidjsweb.ssr($2c920813c92d6987$var$_tmpl$3, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.escape($8edd3cf30d1fd8b4$export$a2cc176055f8f08()), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $6c2c739b113a8ddf$export$d21e32dfedac04be), $3hooq$solidjsweb.mergeProps({
+    get rows() {
+      return rows_object_();
+    },
+    layout: "grid",
+    element_attributes: {
+      class: "cards"
+    }
+  }, layout_options_, {
+    get children() {
+      return $3hooq$solidjsweb.createComponent((0, $3hooq$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($3hooq$solidjs.createMemo(() => recommendations_resource_() || []));
+            return $76012c4468a53d1f$export$43f0fb951fcb0c54({
+              displays_by_key_: displays_by_key_,
+              product_card_template_: product_card_template_
+            });
+          })();
+        }
+      });
+    }
+  }))))];
+  return $3hooq$solidjsweb.createComponent((0, $3hooq$solidjs.Show), {
+    get when() {
+      return is_showing_something();
+    },
+    children: elements
+  });
+}
+var $e57cd46536ad992e$var$_tmpl$ = ["<div", ' class="depict recommendations looks" style="', '">', "</div>"];
+let $e57cd46536ad992e$var$expandedLooksSignal_;
+function $e57cd46536ad992e$export$2c9f9bf2092486aa(props) {
   return $d05611ff6b8c8357$export$23fca46f3143581f(() => {
-    $8446f782881fa12e$var$expandedLooksSignal_ || ($8446f782881fa12e$var$expandedLooksSignal_ = $3hooq$solidjs.createSignal(new Set(), {
+    $e57cd46536ad992e$var$expandedLooksSignal_ || ($e57cd46536ad992e$var$expandedLooksSignal_ = $3hooq$solidjs.createSignal(new Set(), {
       equals: false
     }));
     const expandingAnimationDuration = 240;
@@ -1770,38 +1849,49 @@ 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_: $3hooq$solidjs.createMemo(() => ({
+        cols_at_size: $5401a6698b0c0658$export$6daf8749b65a1b77(props.columnsAtSize_),
+        ...grid_spacing_override()
+      }))
+    };
     $3hooq$solidjs.createEffect(() => {
       const {
         onNavigation_: onNavigation_
       } = props;
       if (onNavigation_) pseudoRouter.on_navigation_ = onNavigation_;
     });
-    return $3hooq$solidjsweb.ssr($8446f782881fa12e$var$_tmpl$, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.ssrStyle("--animation-duration: ".concat(expandingAnimationDuration, "ms")), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $d067f3a30f047b41$export$e68cff63f76bd15b), {
+    return $3hooq$solidjsweb.ssr($e57cd46536ad992e$var$_tmpl$, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.ssrStyle("--animation-duration: ".concat(expandingAnimationDuration, "ms")), $3hooq$solidjsweb.escape($3hooq$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_: $3hooq$solidjs.createMemo(() => ({
-            cols_at_size: $5401a6698b0c0658$export$6daf8749b65a1b77(props.columnsAtSize_),
-            ...grid_spacing_override()
-          }))
+        return $3hooq$solidjsweb.createComponent((0, $3hooq$solidjs.Show), {
+          get when() {
+            return props.gridOptions_;
+          },
+          get fallback() {
+            return $3hooq$solidjsweb.createComponent((0, $236a257ee52e5414$export$d41d19e89346fa2), sharedOptions);
+          },
+          get children() {
+            return $3hooq$solidjsweb.createComponent((0, $2c920813c92d6987$export$7da560f849543dff), $3hooq$solidjsweb.mergeProps(sharedOptions, () => props.gridOptions_));
+          }
         });
       }
     })));
   }, "LookSlider failed");
 }
-async function $8446f782881fa12e$var$runDisplayTransformersForLooks(baseData, listings, displayTransformers) {
+async function $e57cd46536ad992e$var$runDisplayTransformersForLooks(baseData, listings, displayTransformers) {
   try {
     const {
       products: productTransformer,
@@ -4559,89 +4649,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$ = ["<h2", ' class="recs-title">', "</h2>"],
-  $2c920813c92d6987$var$_tmpl$2 = ["<div", ' class="recommendation-grid"><!--$-->', "<!--/--><!--$-->", "<!--/--></div>"];
-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 = $3hooq$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 = $3hooq$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 = [$3hooq$solidjsweb.createComponent((0, $3hooq$solidjs.Show), {
-    get when() {
-      return title();
-    },
-    get children() {
-      return $3hooq$solidjsweb.ssr($2c920813c92d6987$var$_tmpl$, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.escape(title()));
-    }
-  }), $3hooq$solidjsweb.ssr($2c920813c92d6987$var$_tmpl$2, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.escape($8edd3cf30d1fd8b4$export$a2cc176055f8f08()), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $6c2c739b113a8ddf$export$d21e32dfedac04be), $3hooq$solidjsweb.mergeProps({
-    get rows() {
-      return rows_object_();
-    },
-    layout: "grid",
-    element_attributes: {
-      class: "cards"
-    }
-  }, layout_options_, {
-    get children() {
-      return $3hooq$solidjsweb.createComponent((0, $3hooq$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($3hooq$solidjs.createMemo(() => recommendations_resource_() || []));
-            return $76012c4468a53d1f$export$43f0fb951fcb0c54({
-              displays_by_key_: displays_by_key_,
-              product_card_template_: product_card_template_
-            });
-          })();
-        }
-      });
-    }
-  }))))];
-  return $3hooq$solidjsweb.createComponent((0, $3hooq$solidjs.Show), {
-    get when() {
-      return is_showing_something();
-    },
-    children: elements
-  });
-}
-var $41227f10ad680afd$var$_tmpl$ = ["<button", ' class="show-more major" type="button">', "</button>"],
-  $41227f10ad680afd$var$_tmpl$2 = ["<div", ' class="depict plp recommendations">', "</div>"];
+var $41227f10ad680afd$var$_tmpl$ = ["<div", ' class="', '">', "</div>"];
 function $41227f10ad680afd$export$9756467d34d91cdb(props) {
   return $d05611ff6b8c8357$export$23fca46f3143581f(() => {
-    const rows_object_ = $3hooq$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: $3hooq$solidjsweb.ssr($41227f10ad680afd$var$_tmpl$, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.escape(view_more_button.text))
-      };
-    });
     const grid_spacing_override = $3hooq$solidjs.createMemo(() => {
       const {
         grid_spacing: grid_spacing
@@ -4654,10 +4664,11 @@ function $41227f10ad680afd$export$9756467d34d91cdb(props) {
       };
     });
     const [recommendations_resource_] = $3hooq$solidjs.createResource(() => props.recommendations, recs => recs);
-    return $3hooq$solidjsweb.ssr($41227f10ad680afd$var$_tmpl$2, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $d067f3a30f047b41$export$e68cff63f76bd15b), {
+    return $3hooq$solidjsweb.ssr($41227f10ad680afd$var$_tmpl$, $3hooq$solidjsweb.ssrHydrationKey(), "depict plp recommendations".concat(props.class ? " ".concat($3hooq$solidjsweb.escape(props.class, true)) : ""), $3hooq$solidjsweb.escape($3hooq$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);
           },
@@ -4925,7 +4936,7 @@ function $3476012866dab42c$var$actualSetupModal() {
     closeModal: actually_close_modal_
   };
 }
-var $2badc30d7c6610e1$var$_tmpl$ = ["<div", ' class="depict recommendations">', "</div>"];
+var $2badc30d7c6610e1$var$_tmpl$ = ["<div", ' class="', '">', "</div>"];
 function $2badc30d7c6610e1$export$9574e176201e5e8d(props) {
   return $d05611ff6b8c8357$export$23fca46f3143581f(() => {
     const grid_spacing_override = $3hooq$solidjs.createMemo(() => {
@@ -4940,7 +4951,7 @@ function $2badc30d7c6610e1$export$9574e176201e5e8d(props) {
       };
     });
     const [recommendations_resource_] = $3hooq$solidjs.createResource(() => props.recommendations, recs => recs);
-    return $3hooq$solidjsweb.ssr($2badc30d7c6610e1$var$_tmpl$, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $d067f3a30f047b41$export$e68cff63f76bd15b), {
+    return $3hooq$solidjsweb.ssr($2badc30d7c6610e1$var$_tmpl$, $3hooq$solidjsweb.ssrHydrationKey(), "depict recommendations".concat(props.class ? " ".concat($3hooq$solidjsweb.escape(props.class, true)) : ""), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $d067f3a30f047b41$export$e68cff63f76bd15b), {
       get children() {
         return $236a257ee52e5414$export$d41d19e89346fa2({
           product_card_template_: function () {

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