@depict-ai/ui 4.2.2 → 4.3.1

package/README.md

@@ -11,3 +11,4 @@ Breaking changes:
 - 2.0.0 Made `enable_content_search` `true` by default. Redesigned filter counts.
 - 3.0.19 (first `latest` tagged release of version 3): Please see this [migration guide](https://docs.depict.ai/other-guides/sdk-migration-v2-v3)
 - 4.x.x: See https://docs.depict.ai/other-guides/sdk-migration-v3-v4
+- 4.3.0: Removed `recommendations_cols_at_size`. Technically breaking change but since this wasn't ever exposed in the js-ui and react-ui packages, I'm releasing it as minor version.

package/latest/index.cjs

@@ -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.2.2";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "4.3.1";
 const $4e04be41243c3d80$var$transform_elements = sorted_cols_at_size => {
   const cols_at_size = [];
   for (let i = 0; i < sorted_cols_at_size.length; i++) {
@@ -1298,7 +1298,7 @@ function $d212a67662c5cf38$export$9d4a4b669b1929ab(props) {
     }
   }));
 }
-var $1ae437d7d388a66e$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=img-wrapper><!$><!/><!$><!/>`),
+var $1ae437d7d388a66e$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=img-wrapper>`),
   $1ae437d7d388a66e$var$_tmpl$2 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<span class="d-price original">`),
   $1ae437d7d388a66e$var$_tmpl$3 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=right-part><div class=text-container><span class="d-title line-clamp"></span><span class=d-price></span><!$><!/></div><!$><!/>`),
   $1ae437d7d388a66e$var$_tmpl$4 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<a class=look-item><!$><!/><!$><!/>`);
@@ -1314,9 +1314,7 @@ function $1ae437d7d388a66e$export$b73ed90f0ee50dc3({
     const display = display_();
     return display?.variant_displays[display?.variant_index];
   });
-  const imageUrls = () => variantToUse()?.image_urls;
-  const imageUrl = $gVhhF$solidjs.createMemo(() => imageUrls()?.[0]);
-  const secondaryImageUrl = $gVhhF$solidjs.createMemo(() => imageUrls()?.[1]);
+  const imageUrl = $gVhhF$solidjs.createMemo(() => variantToUse()?.image_urls?.[0]);
   const [animationIsRunning, setAnimationIsRunning] = textFadeInAnimationRunning_;
   const [isExpandedThrottledByOurEffectRun, setIsExpandedThrottledByOurEffectRun] = $gVhhF$solidjs.createSignal($gVhhF$solidjs.untrack(isExpanded_));
   const [animationEffectExists, setAnimationEffectExists] = $gVhhF$solidjs.createSignal(false);
@@ -1326,10 +1324,10 @@ function $1ae437d7d388a66e$export$b73ed90f0ee50dc3({
   const FavoriteButton = FavoriteButton_; // Just to get rid of the type error - TS doesn't understand <Show>
   return (() => {
     var _el$ = $gVhhF$solidjsweb.getNextElement($1ae437d7d388a66e$var$_tmpl$4),
-      _el$16 = _el$.firstChild,
-      [_el$17, _co$5] = $gVhhF$solidjsweb.getNextMarker(_el$16.nextSibling),
-      _el$18 = _el$17.nextSibling,
-      [_el$19, _co$6] = $gVhhF$solidjsweb.getNextMarker(_el$18.nextSibling);
+      _el$12 = _el$.firstChild,
+      [_el$13, _co$3] = $gVhhF$solidjsweb.getNextMarker(_el$12.nextSibling),
+      _el$14 = _el$13.nextSibling,
+      [_el$15, _co$4] = $gVhhF$solidjsweb.getNextMarker(_el$14.nextSibling);
     var _ref$ = outerRef_;
     typeof _ref$ === "function" ? $gVhhF$solidjsweb.use(_ref$, _el$) : outerRef_ = _el$;
     $gVhhF$solidjsweb.spread(_el$, $gVhhF$solidjsweb.mergeProps(() => isExpanded_() && !animationIsRunning() ? {
@@ -1343,11 +1341,7 @@ function $1ae437d7d388a66e$export$b73ed90f0ee50dc3({
         });
       },
       get children() {
-        var _el$2 = $gVhhF$solidjsweb.getNextElement($1ae437d7d388a66e$var$_tmpl$),
-          _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);
+        var _el$2 = $gVhhF$solidjsweb.getNextElement($1ae437d7d388a66e$var$_tmpl$);
         $gVhhF$solidjsweb.insert(_el$2, $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
           get when() {
             return imageUrl();
@@ -1370,42 +1364,23 @@ function $1ae437d7d388a66e$export$b73ed90f0ee50dc3({
               }
             });
           }
-        }), _el$4, _co$);
-        $gVhhF$solidjsweb.insert(_el$2, $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
-          get when() {
-            return secondaryImageUrl();
-          },
-          get children() {
-            return $gVhhF$solidjsweb.createComponent((0, $d212a67662c5cf38$export$9d4a4b669b1929ab), {
-              get src() {
-                return secondaryImageUrl();
-              },
-              get aspectRatio() {
-                return isExpanded_() ? 0.75 : 1;
-              },
-              "class": "secondary",
-              get autoAdjustAspectRatio() {
-                return isExpanded_() ? "smoothed" : false;
-              }
-            });
-          }
-        }), _el$6, _co$2);
+        }));
         return _el$2;
       }
-    }), _el$17, _co$5);
+    }), _el$13, _co$3);
     $gVhhF$solidjsweb.insert(_el$, $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
       get when() {
         return (animationEffectExists() ? isExpandedThrottledByOurEffectRun() : isExpanded_()) || animationIsRunning();
       },
       get children() {
-        var _el$7 = $gVhhF$solidjsweb.getNextElement($1ae437d7d388a66e$var$_tmpl$3),
-          _el$8 = _el$7.firstChild,
-          _el$9 = _el$8.firstChild,
-          _el$10 = _el$9.nextSibling,
-          _el$12 = _el$10.nextSibling,
-          [_el$13, _co$3] = $gVhhF$solidjsweb.getNextMarker(_el$12.nextSibling),
-          _el$14 = _el$8.nextSibling,
-          [_el$15, _co$4] = $gVhhF$solidjsweb.getNextMarker(_el$14.nextSibling);
+        var _el$3 = $gVhhF$solidjsweb.getNextElement($1ae437d7d388a66e$var$_tmpl$3),
+          _el$4 = _el$3.firstChild,
+          _el$5 = _el$4.firstChild,
+          _el$6 = _el$5.nextSibling,
+          _el$8 = _el$6.nextSibling,
+          [_el$9, _co$] = $gVhhF$solidjsweb.getNextMarker(_el$8.nextSibling),
+          _el$10 = _el$4.nextSibling,
+          [_el$11, _co$2] = $gVhhF$solidjsweb.getNextMarker(_el$10.nextSibling);
         $gVhhF$solidjsweb.use(element => {
           const owner = $gVhhF$solidjs.getOwner();
           $gVhhF$solidjs.onCleanup((0, $gVhhF$depictaiutilishared.observer).onexists(element, ({
@@ -1437,46 +1412,46 @@ function $1ae437d7d388a66e$export$b73ed90f0ee50dc3({
             for (const ev of ["cancel", "finish"]) textContainerAnimation.addEventListener(ev, $gVhhF$depictaiutilishared.catchify(() => setAnimationIsRunning(false)));
             disconnector();
           }));
-        }, _el$7);
-        $gVhhF$solidjsweb.insert(_el$9, () => variantToUse()?.title ?? $gVhhF$solidjsweb.createComponent((0, $061ff5b4c3d36171$export$89c6019e4baa40b1), {
+        }, _el$3);
+        $gVhhF$solidjsweb.insert(_el$5, () => variantToUse()?.title ?? $gVhhF$solidjsweb.createComponent((0, $061ff5b4c3d36171$export$89c6019e4baa40b1), {
           height: "1em",
           width: "20ch"
         }));
-        $gVhhF$solidjsweb.insert(_el$10, (() => {
+        $gVhhF$solidjsweb.insert(_el$6, (() => {
           var _c$ = $gVhhF$solidjsweb.memo(() => !!(!variantToUse() || salePrice.loading));
           return () => _c$() ? $gVhhF$solidjsweb.createComponent((0, $061ff5b4c3d36171$export$89c6019e4baa40b1), {
             height: "1em",
             width: "20ch"
           }) : salePrice();
         })());
-        $gVhhF$solidjsweb.insert(_el$8, $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
+        $gVhhF$solidjsweb.insert(_el$4, $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
           get when() {
             return isOnSale();
           },
           get children() {
-            var _el$11 = $gVhhF$solidjsweb.getNextElement($1ae437d7d388a66e$var$_tmpl$2);
-            $gVhhF$solidjsweb.insert(_el$11, (() => {
+            var _el$7 = $gVhhF$solidjsweb.getNextElement($1ae437d7d388a66e$var$_tmpl$2);
+            $gVhhF$solidjsweb.insert(_el$7, (() => {
               var _c$2 = $gVhhF$solidjsweb.memo(() => !!(!variantToUse() || originalPrice.loading));
               return () => _c$2() ? $gVhhF$solidjsweb.createComponent((0, $061ff5b4c3d36171$export$89c6019e4baa40b1), {
                 height: "1em",
                 width: "20ch"
               }) : originalPrice();
             })());
-            return _el$11;
+            return _el$7;
           }
-        }), _el$13, _co$3);
-        $gVhhF$solidjsweb.insert(_el$7, $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
+        }), _el$9, _co$);
+        $gVhhF$solidjsweb.insert(_el$3, $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
           when: FavoriteButton_,
           get children() {
             return $gVhhF$solidjsweb.createComponent(FavoriteButton, {
               display_: display_
             });
           }
-        }), _el$15, _co$4);
-        $gVhhF$solidjsweb.effect(() => _el$10.classList.toggle("sale", !!isOnSale()));
-        return _el$7;
+        }), _el$11, _co$2);
+        $gVhhF$solidjsweb.effect(() => _el$6.classList.toggle("sale", !!isOnSale()));
+        return _el$3;
       }
-    }), _el$19, _co$6);
+    }), _el$15, _co$4);
     $gVhhF$solidjsweb.runHydrationEvents();
     return _el$;
   })();
@@ -1650,7 +1625,13 @@ function $ad882bbe664dbd53$export$44809a8a3e867e30({
   const us = Symbol("look");
   const container = (() => {
     var _el$ = $gVhhF$solidjsweb.getNextElement($ad882bbe664dbd53$var$_tmpl$);
-    $gVhhF$solidjsweb.addEventListener(_el$, "click", $gVhhF$depictaiutilishared.catchify(() => setUserWantsExpanded(prev => !prev)), true);
+    $gVhhF$solidjsweb.addEventListener(_el$, "click", $gVhhF$depictaiutilishared.catchify(({
+      target: target
+    }) => {
+      // Don't toggle when clicking on the links
+      if (target.matches("a") || target.closest("a")) return;
+      setUserWantsExpanded(prev => !prev);
+    }), true);
     _el$.classList.toggle("placeholder", !!!display_);
     $gVhhF$solidjsweb.runHydrationEvents();
     return _el$;
@@ -11661,7 +11642,8 @@ function $f8f64d05c525825b$export$d7841e452f2e59a8({
   selected_filters_: selected_filters_,
   local_filter_cache_: local_filter_cache_,
   get_extra_filters_button_: get_extra_filters_button_,
-  get_extra_sorting_button_: get_extra_sorting_button_
+  get_extra_sorting_button_: get_extra_sorting_button_,
+  filterModalParent_: filterModalParent_
 }) {
   const Self = () => {
     // This could technically be in SearchPage and CategoryPage and would be better suited there since it writes into local_filter_cache_ which i.e. SelectedFilters uses, but it's better suited here IMO due to DRY and being inside the correct error boundary here
@@ -11781,7 +11763,7 @@ function $f8f64d05c525825b$export$d7841e452f2e59a8({
         formatted_number_of_results_: formatted_number_of_results_,
         dismiss_modal_: dismiss_modal_,
         i18n_: i18n_
-      }));
+      }, filterModalParent_));
       const {
         remove: remove
       } = $gVhhF$depictaiutilishared.javascript_media_query("(max-width:651px)", ({
@@ -12794,7 +12776,6 @@ function $f1d7cb69f839a526$export$a54ec244c8863715({
   market_: market_,
   showing_recommendation_rows_: showing_recommendation_rows_,
   layout_options_: layout_options_,
-  recommendations_layout_options_: recommendations_layout_options_,
   scroll_restoration_data_: scroll_restoration_data_,
   product_card_template_: product_card_template_,
   modalAlignmentSignalsRef_: modalAlignmentSignalsRef_,
@@ -12804,7 +12785,8 @@ function $f1d7cb69f839a526$export$a54ec244c8863715({
   content_search_enabled_: content_search_enabled_,
   content_blocks_by_row_: content_blocks_by_row_,
   modalVersionUsed_: modalVersionUsed_,
-  BackIcon_: BackIcon_
+  BackIcon_: BackIcon_,
+  filterModalParent_: filterModalParent_
 }) {
   const [get_sorting] = current_sorting_;
   const all_products_loaded_ = $gVhhF$solidjs.createSignal(false);
@@ -12910,7 +12892,8 @@ function $f1d7cb69f839a526$export$a54ec244c8863715({
     formatted_number_of_results_: formatted_number_of_results_,
     local_filter_cache_: local_filter_cache_,
     expanded_hierarchical_filters_: expanded_hierarchical_filters_,
-    number_of_rendered_selected_filters_items_: number_of_rendered_selected_filters_items_
+    number_of_rendered_selected_filters_items_: number_of_rendered_selected_filters_items_,
+    filterModalParent_: filterModalParent_
   });
   const results_filters = $gVhhF$solidjs.createSignal();
   const owner = $gVhhF$solidjs.getOwner();
@@ -13164,9 +13147,7 @@ function $f1d7cb69f839a526$export$a54ec244c8863715({
               depict_api_: depict_api_,
               i18n_: i18n_,
               search_query_base_: search_query_base_,
-              get layout_options_() {
-                return $gVhhF$solidjs.createMemo(() => recommendations_layout_options_?.() ?? layout_options_());
-              },
+              layout_options_: layout_options_,
               showing_recommendation_rows_: showing_recommendation_rows_,
               product_card_template_: product_card_template_,
               all_products_loaded_: get_all_products_loaded
@@ -13579,15 +13560,7 @@ function $2c61e4cd8229c49a$export$f2dc7e4e4aa11abb(props) {
         cols_at_size: $4e04be41243c3d80$export$6daf8749b65a1b77($ab7c6c7911bae2f5$export$ff7109b9b2b206ba(props.cols_at_size)),
         ...grid_spacing_override()
       })),
-      recommendations_layout_options_: $gVhhF$solidjs.createMemo(() => {
-        const {
-          extra_depict_options: extra_depict_options
-        } = props;
-        return extra_depict_options?.recommendations_cols_at_size ? {
-          cols_at_size: $4e04be41243c3d80$export$6daf8749b65a1b77(extra_depict_options.recommendations_cols_at_size),
-          ...grid_spacing_override()
-        } : undefined;
-      }),
+      filterModalParent_: $gVhhF$solidjs.untrack(() => props.filterModalParent_),
       product_card_template_: product_card_template
     });
   }, "Entire SearchPage failed");
@@ -14418,7 +14391,8 @@ function $840d88a04b2d22a7$export$f7d2f673fc2f091d({
   sideways_filter_clearing_flag_: sideways_filter_clearing_flag_,
   sorting_query_param_: sorting_query_param_,
   filter_query_param_prefix_: filter_query_param_prefix_,
-  content_blocks_by_row_: content_blocks_by_row_
+  content_blocks_by_row_: content_blocks_by_row_,
+  filterModalParent_: filterModalParent_
 }) {
   let results_for;
   let only_show_filters_opener_;
@@ -14596,6 +14570,7 @@ function $840d88a04b2d22a7$export$f7d2f673fc2f091d({
     expanded_hierarchical_filters_: expanded_hierarchical_filters_,
     number_of_rendered_selected_filters_items_: number_of_rendered_selected_filters_items_,
     sort_and_filter_disabled_: sort_and_filter_disabled_,
+    filterModalParent_: filterModalParent_,
     ...extra_sort_and_filter_args_
   });
   $gVhhF$depictaiutilisharedlatest.catchify((0, $276380e4607fb9fb$export$6e49da55e449af7c))({
@@ -14873,6 +14848,7 @@ function $14f289047713d67a$export$e2bf8ce7779e827e(props) {
       category_sorting_open_: category_sorting_open_,
       expanded_filters_: expanded_filters_,
       expanded_hierarchical_filters_: expanded_hierarchical_filters_,
+      filterModalParent_: $gVhhF$solidjs.untrack(() => props.filterModalParent_),
       selected_filters_: selected_filters_,
       sideways_filter_clearing_flag_: sideways_filter_clearing_flag_,
       content_blocks_by_row_: () => props.content_blocks_by_row,

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.2.2";
+export const version = "4.3.1";
 declare const LISTING_ID = "listingId";
 declare const EXTERNAL_ID = "externalId";
 type ScrollRestorationData = {
@@ -1337,9 +1337,7 @@ export function SearchPage<OriginalDisplay extends Display, TransformedDisplay e
   product_card_template: ProductCardTemplate<[TransformedDisplay] extends [never] ? OriginalDisplay : ModernDisplayWithPageUrl<TransformedDisplay>>;
   content_blocks_by_row?: ContentBlocksByRow;
   on_query_change?: (new_query?: string | undefined, old_query?: string | undefined) => void;
-  extra_depict_options?: {
-    recommendations_cols_at_size?: SDKColsAtSize;
-  };
+  filterModalParent_?: HTMLElement | ShadowRoot;
 }): import("@depict-ai/utilishared").Node_Array;
 /**
  * Connects the height of the search field to the height of the aligner.
@@ -1379,7 +1377,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 ModernDisplay>(openModalParams: OpenModalParams<OriginalDisplay, OutputDisplay>) => void;
+export const open_modal_with_alignment: <OriginalDisplay extends Display, OutputDisplay extends unknown>(openModalParams: OpenModalParams<OriginalDisplay, OutputDisplay>) => void;
 export function open_search_with_shift_slash(open_search: VoidFunction): () => void;
 export interface PageReplacer {
   readonly render_: () => Node_Array;
@@ -1456,5 +1454,6 @@ export function CategoryPage<OriginalDisplay extends Display, OutputDisplay exte
   on_listing_query_change?: (new_listing_query?: ListingQuery | undefined, old_listing_query?: ListingQuery | undefined) => void;
   content_blocks_by_row?: ContentBlocksByRow;
   layout?: PossibleLayout;
-}): import("@depict-ai/utilishared/latest").Node_Array;
+  filterModalParent_?: HTMLElement | ShadowRoot;
+}): import("@depict-ai/utilishared").Node_Array;
 export type { SearchFilter } from "@depict-ai/types/api/SearchRequestV3";

package/latest/index.js

@@ -7,7 +7,7 @@ import { createStore as $9HbP8$createStore, reconcile as $9HbP8$reconcile } from
 /*! Depict.ai search and product listing SDK */
 import { register_es_version } from "../multi_import_deduplicator.mjs";
 register_es_version("ui", "latest");
-const $ec291e0010116877$export$83d89fbfd8236492 = "4.2.2";
+const $ec291e0010116877$export$83d89fbfd8236492 = "4.3.1";
 const $b5cccc8ee7d24677$var$transform_elements = sorted_cols_at_size => {
   const cols_at_size = [];
   for (let i = 0; i < sorted_cols_at_size.length; i++) {
@@ -1211,7 +1211,7 @@ function $70bb27cc6be01fc7$export$9d4a4b669b1929ab(props) {
     }
   }));
 }
-var $5a6c386e1bde5665$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<div class=img-wrapper><!$><!/><!$><!/>`),
+var $5a6c386e1bde5665$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<div class=img-wrapper>`),
   $5a6c386e1bde5665$var$_tmpl$2 = /*#__PURE__*/$9HbP8$template(`<span class="d-price original">`),
   $5a6c386e1bde5665$var$_tmpl$3 = /*#__PURE__*/$9HbP8$template(`<div class=right-part><div class=text-container><span class="d-title line-clamp"></span><span class=d-price></span><!$><!/></div><!$><!/>`),
   $5a6c386e1bde5665$var$_tmpl$4 = /*#__PURE__*/$9HbP8$template(`<a class=look-item><!$><!/><!$><!/>`);
@@ -1227,9 +1227,7 @@ function $5a6c386e1bde5665$export$b73ed90f0ee50dc3({
     const display = display_();
     return display?.variant_displays[display?.variant_index];
   });
-  const imageUrls = () => variantToUse()?.image_urls;
-  const imageUrl = $9HbP8$createMemo(() => imageUrls()?.[0]);
-  const secondaryImageUrl = $9HbP8$createMemo(() => imageUrls()?.[1]);
+  const imageUrl = $9HbP8$createMemo(() => variantToUse()?.image_urls?.[0]);
   const [animationIsRunning, setAnimationIsRunning] = textFadeInAnimationRunning_;
   const [isExpandedThrottledByOurEffectRun, setIsExpandedThrottledByOurEffectRun] = $9HbP8$createSignal($9HbP8$untrack(isExpanded_));
   const [animationEffectExists, setAnimationEffectExists] = $9HbP8$createSignal(false);
@@ -1239,10 +1237,10 @@ function $5a6c386e1bde5665$export$b73ed90f0ee50dc3({
   const FavoriteButton = FavoriteButton_; // Just to get rid of the type error - TS doesn't understand <Show>
   return (() => {
     var _el$ = $9HbP8$getNextElement($5a6c386e1bde5665$var$_tmpl$4),
-      _el$16 = _el$.firstChild,
-      [_el$17, _co$5] = $9HbP8$getNextMarker(_el$16.nextSibling),
-      _el$18 = _el$17.nextSibling,
-      [_el$19, _co$6] = $9HbP8$getNextMarker(_el$18.nextSibling);
+      _el$12 = _el$.firstChild,
+      [_el$13, _co$3] = $9HbP8$getNextMarker(_el$12.nextSibling),
+      _el$14 = _el$13.nextSibling,
+      [_el$15, _co$4] = $9HbP8$getNextMarker(_el$14.nextSibling);
     var _ref$ = outerRef_;
     typeof _ref$ === "function" ? $9HbP8$use(_ref$, _el$) : outerRef_ = _el$;
     $9HbP8$spread(_el$, $9HbP8$mergeProps(() => isExpanded_() && !animationIsRunning() ? {
@@ -1256,11 +1254,7 @@ function $5a6c386e1bde5665$export$b73ed90f0ee50dc3({
         });
       },
       get children() {
-        var _el$2 = $9HbP8$getNextElement($5a6c386e1bde5665$var$_tmpl$),
-          _el$3 = _el$2.firstChild,
-          [_el$4, _co$] = $9HbP8$getNextMarker(_el$3.nextSibling),
-          _el$5 = _el$4.nextSibling,
-          [_el$6, _co$2] = $9HbP8$getNextMarker(_el$5.nextSibling);
+        var _el$2 = $9HbP8$getNextElement($5a6c386e1bde5665$var$_tmpl$);
         $9HbP8$insert(_el$2, $9HbP8$createComponent((0, $9HbP8$Show), {
           get when() {
             return imageUrl();
@@ -1283,42 +1277,23 @@ function $5a6c386e1bde5665$export$b73ed90f0ee50dc3({
               }
             });
           }
-        }), _el$4, _co$);
-        $9HbP8$insert(_el$2, $9HbP8$createComponent((0, $9HbP8$Show), {
-          get when() {
-            return secondaryImageUrl();
-          },
-          get children() {
-            return $9HbP8$createComponent((0, $70bb27cc6be01fc7$export$9d4a4b669b1929ab), {
-              get src() {
-                return secondaryImageUrl();
-              },
-              get aspectRatio() {
-                return isExpanded_() ? 0.75 : 1;
-              },
-              "class": "secondary",
-              get autoAdjustAspectRatio() {
-                return isExpanded_() ? "smoothed" : false;
-              }
-            });
-          }
-        }), _el$6, _co$2);
+        }));
         return _el$2;
       }
-    }), _el$17, _co$5);
+    }), _el$13, _co$3);
     $9HbP8$insert(_el$, $9HbP8$createComponent((0, $9HbP8$Show), {
       get when() {
         return (animationEffectExists() ? isExpandedThrottledByOurEffectRun() : isExpanded_()) || animationIsRunning();
       },
       get children() {
-        var _el$7 = $9HbP8$getNextElement($5a6c386e1bde5665$var$_tmpl$3),
-          _el$8 = _el$7.firstChild,
-          _el$9 = _el$8.firstChild,
-          _el$10 = _el$9.nextSibling,
-          _el$12 = _el$10.nextSibling,
-          [_el$13, _co$3] = $9HbP8$getNextMarker(_el$12.nextSibling),
-          _el$14 = _el$8.nextSibling,
-          [_el$15, _co$4] = $9HbP8$getNextMarker(_el$14.nextSibling);
+        var _el$3 = $9HbP8$getNextElement($5a6c386e1bde5665$var$_tmpl$3),
+          _el$4 = _el$3.firstChild,
+          _el$5 = _el$4.firstChild,
+          _el$6 = _el$5.nextSibling,
+          _el$8 = _el$6.nextSibling,
+          [_el$9, _co$] = $9HbP8$getNextMarker(_el$8.nextSibling),
+          _el$10 = _el$4.nextSibling,
+          [_el$11, _co$2] = $9HbP8$getNextMarker(_el$10.nextSibling);
         $9HbP8$use(element => {
           const owner = $9HbP8$getOwner();
           $9HbP8$onCleanup((0, $9HbP8$observer).onexists(element, ({
@@ -1350,46 +1325,46 @@ function $5a6c386e1bde5665$export$b73ed90f0ee50dc3({
             for (const ev of ["cancel", "finish"]) textContainerAnimation.addEventListener(ev, $9HbP8$catchify(() => setAnimationIsRunning(false)));
             disconnector();
           }));
-        }, _el$7);
-        $9HbP8$insert(_el$9, () => variantToUse()?.title ?? $9HbP8$createComponent((0, $d134eae24341b4a1$export$89c6019e4baa40b1), {
+        }, _el$3);
+        $9HbP8$insert(_el$5, () => variantToUse()?.title ?? $9HbP8$createComponent((0, $d134eae24341b4a1$export$89c6019e4baa40b1), {
           height: "1em",
           width: "20ch"
         }));
-        $9HbP8$insert(_el$10, (() => {
+        $9HbP8$insert(_el$6, (() => {
           var _c$ = $9HbP8$memo(() => !!(!variantToUse() || salePrice.loading));
           return () => _c$() ? $9HbP8$createComponent((0, $d134eae24341b4a1$export$89c6019e4baa40b1), {
             height: "1em",
             width: "20ch"
           }) : salePrice();
         })());
-        $9HbP8$insert(_el$8, $9HbP8$createComponent((0, $9HbP8$Show), {
+        $9HbP8$insert(_el$4, $9HbP8$createComponent((0, $9HbP8$Show), {
           get when() {
             return isOnSale();
           },
           get children() {
-            var _el$11 = $9HbP8$getNextElement($5a6c386e1bde5665$var$_tmpl$2);
-            $9HbP8$insert(_el$11, (() => {
+            var _el$7 = $9HbP8$getNextElement($5a6c386e1bde5665$var$_tmpl$2);
+            $9HbP8$insert(_el$7, (() => {
               var _c$2 = $9HbP8$memo(() => !!(!variantToUse() || originalPrice.loading));
               return () => _c$2() ? $9HbP8$createComponent((0, $d134eae24341b4a1$export$89c6019e4baa40b1), {
                 height: "1em",
                 width: "20ch"
               }) : originalPrice();
             })());
-            return _el$11;
+            return _el$7;
           }
-        }), _el$13, _co$3);
-        $9HbP8$insert(_el$7, $9HbP8$createComponent((0, $9HbP8$Show), {
+        }), _el$9, _co$);
+        $9HbP8$insert(_el$3, $9HbP8$createComponent((0, $9HbP8$Show), {
           when: FavoriteButton_,
           get children() {
             return $9HbP8$createComponent(FavoriteButton, {
               display_: display_
             });
           }
-        }), _el$15, _co$4);
-        $9HbP8$effect(() => _el$10.classList.toggle("sale", !!isOnSale()));
-        return _el$7;
+        }), _el$11, _co$2);
+        $9HbP8$effect(() => _el$6.classList.toggle("sale", !!isOnSale()));
+        return _el$3;
       }
-    }), _el$19, _co$6);
+    }), _el$15, _co$4);
     $9HbP8$runHydrationEvents();
     return _el$;
   })();
@@ -1563,7 +1538,13 @@ function $28ee4f7db3cc44b8$export$44809a8a3e867e30({
   const us = Symbol("look");
   const container = (() => {
     var _el$ = $9HbP8$getNextElement($28ee4f7db3cc44b8$var$_tmpl$);
-    $9HbP8$addEventListener(_el$, "click", $9HbP8$catchify(() => setUserWantsExpanded(prev => !prev)), true);
+    $9HbP8$addEventListener(_el$, "click", $9HbP8$catchify(({
+      target: target
+    }) => {
+      // Don't toggle when clicking on the links
+      if (target.matches("a") || target.closest("a")) return;
+      setUserWantsExpanded(prev => !prev);
+    }), true);
     _el$.classList.toggle("placeholder", !!!display_);
     $9HbP8$runHydrationEvents();
     return _el$;
@@ -11574,7 +11555,8 @@ function $cdea4cf8c5c071ef$export$d7841e452f2e59a8({
   selected_filters_: selected_filters_,
   local_filter_cache_: local_filter_cache_,
   get_extra_filters_button_: get_extra_filters_button_,
-  get_extra_sorting_button_: get_extra_sorting_button_
+  get_extra_sorting_button_: get_extra_sorting_button_,
+  filterModalParent_: filterModalParent_
 }) {
   const Self = () => {
     // This could technically be in SearchPage and CategoryPage and would be better suited there since it writes into local_filter_cache_ which i.e. SelectedFilters uses, but it's better suited here IMO due to DRY and being inside the correct error boundary here
@@ -11694,7 +11676,7 @@ function $cdea4cf8c5c071ef$export$d7841e452f2e59a8({
         formatted_number_of_results_: formatted_number_of_results_,
         dismiss_modal_: dismiss_modal_,
         i18n_: i18n_
-      }));
+      }, filterModalParent_));
       const {
         remove: remove
       } = $9HbP8$javascript_media_query("(max-width:651px)", ({
@@ -12707,7 +12689,6 @@ function $7097477c78a89208$export$a54ec244c8863715({
   market_: market_,
   showing_recommendation_rows_: showing_recommendation_rows_,
   layout_options_: layout_options_,
-  recommendations_layout_options_: recommendations_layout_options_,
   scroll_restoration_data_: scroll_restoration_data_,
   product_card_template_: product_card_template_,
   modalAlignmentSignalsRef_: modalAlignmentSignalsRef_,
@@ -12717,7 +12698,8 @@ function $7097477c78a89208$export$a54ec244c8863715({
   content_search_enabled_: content_search_enabled_,
   content_blocks_by_row_: content_blocks_by_row_,
   modalVersionUsed_: modalVersionUsed_,
-  BackIcon_: BackIcon_
+  BackIcon_: BackIcon_,
+  filterModalParent_: filterModalParent_
 }) {
   const [get_sorting] = current_sorting_;
   const all_products_loaded_ = $9HbP8$createSignal(false);
@@ -12823,7 +12805,8 @@ function $7097477c78a89208$export$a54ec244c8863715({
     formatted_number_of_results_: formatted_number_of_results_,
     local_filter_cache_: local_filter_cache_,
     expanded_hierarchical_filters_: expanded_hierarchical_filters_,
-    number_of_rendered_selected_filters_items_: number_of_rendered_selected_filters_items_
+    number_of_rendered_selected_filters_items_: number_of_rendered_selected_filters_items_,
+    filterModalParent_: filterModalParent_
   });
   const results_filters = $9HbP8$createSignal();
   const owner = $9HbP8$getOwner();
@@ -13077,9 +13060,7 @@ function $7097477c78a89208$export$a54ec244c8863715({
               depict_api_: depict_api_,
               i18n_: i18n_,
               search_query_base_: search_query_base_,
-              get layout_options_() {
-                return $9HbP8$createMemo(() => recommendations_layout_options_?.() ?? layout_options_());
-              },
+              layout_options_: layout_options_,
               showing_recommendation_rows_: showing_recommendation_rows_,
               product_card_template_: product_card_template_,
               all_products_loaded_: get_all_products_loaded
@@ -13492,15 +13473,7 @@ function $806c97b931758897$export$f2dc7e4e4aa11abb(props) {
         cols_at_size: $b5cccc8ee7d24677$export$6daf8749b65a1b77($1848f7cca286fbab$export$ff7109b9b2b206ba(props.cols_at_size)),
         ...grid_spacing_override()
       })),
-      recommendations_layout_options_: $9HbP8$createMemo(() => {
-        const {
-          extra_depict_options: extra_depict_options
-        } = props;
-        return extra_depict_options?.recommendations_cols_at_size ? {
-          cols_at_size: $b5cccc8ee7d24677$export$6daf8749b65a1b77(extra_depict_options.recommendations_cols_at_size),
-          ...grid_spacing_override()
-        } : undefined;
-      }),
+      filterModalParent_: $9HbP8$untrack(() => props.filterModalParent_),
       product_card_template_: product_card_template
     });
   }, "Entire SearchPage failed");
@@ -14331,7 +14304,8 @@ function $df5d81d0fe61ff21$export$f7d2f673fc2f091d({
   sideways_filter_clearing_flag_: sideways_filter_clearing_flag_,
   sorting_query_param_: sorting_query_param_,
   filter_query_param_prefix_: filter_query_param_prefix_,
-  content_blocks_by_row_: content_blocks_by_row_
+  content_blocks_by_row_: content_blocks_by_row_,
+  filterModalParent_: filterModalParent_
 }) {
   let results_for;
   let only_show_filters_opener_;
@@ -14509,6 +14483,7 @@ function $df5d81d0fe61ff21$export$f7d2f673fc2f091d({
     expanded_hierarchical_filters_: expanded_hierarchical_filters_,
     number_of_rendered_selected_filters_items_: number_of_rendered_selected_filters_items_,
     sort_and_filter_disabled_: sort_and_filter_disabled_,
+    filterModalParent_: filterModalParent_,
     ...extra_sort_and_filter_args_
   });
   $9HbP8$catchify1((0, $641bba2917fe862b$export$6e49da55e449af7c))({
@@ -14786,6 +14761,7 @@ function $442f32a4d80abbde$export$e2bf8ce7779e827e(props) {
       category_sorting_open_: category_sorting_open_,
       expanded_filters_: expanded_filters_,
       expanded_hierarchical_filters_: expanded_hierarchical_filters_,
+      filterModalParent_: $9HbP8$untrack(() => props.filterModalParent_),
       selected_filters_: selected_filters_,
       sideways_filter_clearing_flag_: sideways_filter_clearing_flag_,
       content_blocks_by_row_: () => props.content_blocks_by_row,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depict-ai/ui",
-  "version": "4.2.2",
+  "version": "4.3.1",
   "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.1.1",
+    "@depict-ai/plp-styling": "^3.1.3",
     "@depict-ai/types": "^5.1.1",
     "@depict-ai/utilishared": "^2.1.1",
     "solid-js": "^1.8.12"