@depict-ai/ui 4.10.4 → 4.10.6

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.10.4";
+const $ec291e0010116877$export$83d89fbfd8236492 = "4.10.6";
 function $dc9262ef6f786812$export$d9f36cf74e24d595(media_query) {
   const signal = $9HbP8$createSignal(false);
   $9HbP8$onCleanup($9HbP8$javascript_media_query(media_query, ({
@@ -5844,7 +5844,8 @@ function $cdea4cf8c5c071ef$export$d7841e452f2e59a8({
   get_extra_filters_button_: get_extra_filters_button_,
   get_extra_sorting_button_: get_extra_sorting_button_,
   filterModalParent_: filterModalParent_,
-  hideCount0FilterOptions_: hideCount0FilterOptions_
+  hideCount0FilterOptions_: hideCount0FilterOptions_,
+  switchToFiltersDrawerBreakpoint_: switchToFiltersDrawerBreakpoint_
 }) {
   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
@@ -5853,11 +5854,10 @@ function $cdea4cf8c5c071ef$export$d7841e452f2e59a8({
       selected_filters_: selected_filters_,
       local_filter_cache_: local_filter_cache_
     });
-    const cleanup_promise = new Promise(r => $9HbP8$onCleanup(r));
     const [filters_open, set_filters_open] = search_filters_open_;
     const [sorting_open, set_sorting_open] = search_sorting_open_;
     const [get_current_sorting_] = current_sorting_;
-    const [is_small, set_is_small] = $9HbP8$createSignal(false);
+    const isSmall = $9HbP8$createMemo(() => $dc9262ef6f786812$export$d9f36cf74e24d595(`(max-width:${switchToFiltersDrawerBreakpoint_() ?? 651}px)`));
     const dismiss_modal_ = $9HbP8$catchify1(() => {
       set_filters_open(false);
       set_sorting_open(false);
@@ -5909,7 +5909,7 @@ function $cdea4cf8c5c071ef$export$d7841e452f2e59a8({
     $9HbP8$createComputed(() => {
       const fi_o = filters_open();
       const so_o = sorting_open();
-      const i_s = is_small();
+      const i_s = isSmall()();
       // we need to always read all the signal if we have them in the if-statement the value of it changes when the computation runs
       if ((fi_o || so_o) && !i_s) {
         if (!grid_is_in_original_state) return;
@@ -5924,7 +5924,7 @@ function $cdea4cf8c5c071ef$export$d7841e452f2e59a8({
       if (!filters_open() && !sorting_open()) {
         close_modal_?.();
         set_extra_els_in_results_container_("");
-      } else if (is_small()) {
+      } else if (isSmall()()) {
         if ($9HbP8$untrack(() => input_modal_open_?.())) {
           // we don't want to shove another modal into the users face, silently close the filters for them
           set_filters_open(false);
@@ -5966,12 +5966,6 @@ function $cdea4cf8c5c071ef$export$d7841e452f2e59a8({
         dismiss_modal_: dismiss_modal_,
         i18n_: i18n_
       }, filterModalParent_));
-      const {
-        remove: remove
-      } = $9HbP8$javascript_media_query("(max-width:651px)", ({
-        matches: matches
-      }) => set_is_small(matches));
-      cleanup_promise.then(remove);
     })();
     get_extra_filters_button_?.(make_open_filters_button());
     get_extra_sorting_button_?.(make_open_sorting_button());
@@ -7627,12 +7621,17 @@ function $f916989c4b1be9f7$export$780a853d15174484({
     }
   }));
 }
-function $486360b09f0d5729$export$7a92d995f1bf3592(history_content_blocks_, plp_meta, content_blocks_by_row_, router_) {
+function $486360b09f0d5729$export$7a92d995f1bf3592(history_content_blocks_, plp_meta, content_blocks_by_row_, router_, products_request_loading_) {
   let hasSeenContentBlock = false;
   const [historyContentBlocks, setHistoryContentBlocks] = history_content_blocks_;
   const contentComponents = new Map();
+  const delayedServerBlocks = $9HbP8$createMemo(prev => {
+    // Do not update the server blocks while the products request is loading, to avoid this: https://depictaiworkspace.slack.com/archives/C01JB6E7K7G/p1750861454651319
+    if (products_request_loading_()) return prev;
+    return plp_meta()?.content_blocks;
+  });
   $9HbP8$createEffect(() => {
-    const serverContentBlock = plp_meta()?.content_blocks;
+    const serverContentBlock = delayedServerBlocks();
     const currentHistory = $9HbP8$untrack(historyContentBlocks);
     // Only write to the history if the content blocks have changed when a new backend results arrives (we have them in history so scroll restoration works when going back, even when running shopify without single page navigations where our script dies inbetween pages).
     if (serverContentBlock && JSON.stringify(serverContentBlock) !== JSON.stringify(currentHistory.blocks)) setHistoryContentBlocks({
@@ -7738,7 +7737,8 @@ function $df5d81d0fe61ff21$export$f7d2f673fc2f091d({
   content_blocks_by_row_: content_blocks_by_row_,
   filterModalParent_: filterModalParent_,
   showSliderArrow_: showSliderArrow_,
-  hideCount0FilterOptions_: hideCount0FilterOptions_
+  hideCount0FilterOptions_: hideCount0FilterOptions_,
+  switchToFiltersDrawerBreakpoint_: switchToFiltersDrawerBreakpoint_
 }) {
   let results_for;
   let only_show_filters_opener_;
@@ -7834,7 +7834,7 @@ function $df5d81d0fe61ff21$export$f7d2f673fc2f091d({
     setMetaRequestsForQuery(prev => prev.set(query.id_type_ + query.id_to_query_for_, listing));
     return result;
   }));
-  const contentBlocksByRow = $486360b09f0d5729$export$7a92d995f1bf3592(history_content_blocks_, plp_meta, content_blocks_by_row_, router_);
+  const contentBlocksByRow = $486360b09f0d5729$export$7a92d995f1bf3592(history_content_blocks_, plp_meta, content_blocks_by_row_, router_, () => plp_products_.loading);
   const countOfProductsForUI = $3ef0154d1cf118ed$export$a86bc18439445599(plp_products_, all_products_loaded_, currentlyLoadedDisplays);
   const available_sortings_ = $9HbP8$createMemo(() => plp_products_()?.sorts?.map(sort => ({
     ...sort,
@@ -7953,6 +7953,7 @@ function $df5d81d0fe61ff21$export$f7d2f673fc2f091d({
     sort_and_filter_disabled_: sort_and_filter_disabled_,
     filterModalParent_: filterModalParent_,
     hideCount0FilterOptions_: hideCount0FilterOptions_,
+    switchToFiltersDrawerBreakpoint_: switchToFiltersDrawerBreakpoint_,
     ...extra_sort_and_filter_args_
   });
   $9HbP8$catchify((0, $641bba2917fe862b$export$6e49da55e449af7c))({
@@ -14460,7 +14461,8 @@ function $7097477c78a89208$export$a54ec244c8863715({
   filterModalParent_: filterModalParent_,
   class_: class_,
   showSliderArrow_: showSliderArrow_,
-  hideCount0FilterOptions_: hideCount0FilterOptions_
+  hideCount0FilterOptions_: hideCount0FilterOptions_,
+  switchToFiltersDrawerBreakpoint_: switchToFiltersDrawerBreakpoint_
 }) {
   const [get_sorting] = current_sorting_;
   const all_products_loaded_ = $9HbP8$createSignal(false);
@@ -14569,7 +14571,8 @@ function $7097477c78a89208$export$a54ec244c8863715({
     expanded_hierarchical_filters_: expanded_hierarchical_filters_,
     number_of_rendered_selected_filters_items_: number_of_rendered_selected_filters_items_,
     filterModalParent_: filterModalParent_,
-    hideCount0FilterOptions_: hideCount0FilterOptions_
+    hideCount0FilterOptions_: hideCount0FilterOptions_,
+    switchToFiltersDrawerBreakpoint_: switchToFiltersDrawerBreakpoint_
   });
   const results_filters = $9HbP8$createSignal();
   const shouldActuallyShowInputField = $9HbP8$createMemo(() => include_input_field_?.() ?? true); // default to showing input field
@@ -15230,6 +15233,7 @@ function $806c97b931758897$export$f2dc7e4e4aa11abb(props) {
       search_sorting_open_: state_.sorting_open,
       expanded_filters_: state_.expanded_filters,
       content_results_rows_: state_.content_results_rows,
+      switchToFiltersDrawerBreakpoint_: () => props.switchToFiltersDrawerBreakpoint_,
       content_blocks_by_row_: () => props.content_blocks_by_row,
       router_: shared_properties.router_,
       make_category_suggestion_card_: shared_properties.enable_category_suggestions_ ? category_suggestion_ => {
@@ -15827,7 +15831,8 @@ function $442f32a4d80abbde$export$e2bf8ce7779e827e(props) {
       })),
       product_card_template_: product_card_template,
       sorting_query_param_: sorting_query_param_,
-      filter_query_param_prefix_: filter_query_param_prefix_
+      filter_query_param_prefix_: filter_query_param_prefix_,
+      switchToFiltersDrawerBreakpoint_: () => props.switchToFiltersDrawerBreakpoint_
     });
   }, "Entire CategoryPage failed");
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depict-ai/ui",
-  "version": "4.10.4",
+  "version": "4.10.6",
   "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",

package/server/ES10/index.cjs

@@ -115,7 +115,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.10.4";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.10.6";
 function $3e17e871e9d0911d$export$d9f36cf74e24d595(media_query) {
   const signal = $3hooq$solidjs.createSignal(false);
   $3hooq$solidjs.onCleanup($3hooq$depictaiutilishared.javascript_media_query(media_query, _ref => {
@@ -5007,7 +5007,8 @@ function $f70cc6dfcadf0fd5$export$d7841e452f2e59a8(_ref) {
     get_extra_filters_button_: get_extra_filters_button_,
     get_extra_sorting_button_: get_extra_sorting_button_,
     filterModalParent_: filterModalParent_,
-    hideCount0FilterOptions_: hideCount0FilterOptions_
+    hideCount0FilterOptions_: hideCount0FilterOptions_,
+    switchToFiltersDrawerBreakpoint_: switchToFiltersDrawerBreakpoint_
   } = _ref;
   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
@@ -5016,11 +5017,13 @@ function $f70cc6dfcadf0fd5$export$d7841e452f2e59a8(_ref) {
       selected_filters_: selected_filters_,
       local_filter_cache_: local_filter_cache_
     });
-    const cleanup_promise = new Promise(r => $3hooq$solidjs.onCleanup(r));
     const [filters_open, set_filters_open] = search_filters_open_;
     const [sorting_open, set_sorting_open] = search_sorting_open_;
     const [get_current_sorting_] = current_sorting_;
-    const [is_small, set_is_small] = $3hooq$solidjs.createSignal(false);
+    const isSmall = $3hooq$solidjs.createMemo(() => {
+      var _switchToFiltersDrawe;
+      return $3e17e871e9d0911d$export$d9f36cf74e24d595("(max-width:".concat((_switchToFiltersDrawe = switchToFiltersDrawerBreakpoint_()) !== null && _switchToFiltersDrawe !== void 0 ? _switchToFiltersDrawe : 651, "px)"));
+    });
     const dismiss_modal_ = $3hooq$depictaiutilishared.catchify(() => {
       set_filters_open(false);
       set_sorting_open(false);
@@ -5084,7 +5087,7 @@ function $f70cc6dfcadf0fd5$export$d7841e452f2e59a8(_ref) {
     $3hooq$solidjs.createComputed(() => {
       const fi_o = filters_open();
       const so_o = sorting_open();
-      const i_s = is_small();
+      const i_s = isSmall()();
       // we need to always read all the signal if we have them in the if-statement the value of it changes when the computation runs
       if ((fi_o || so_o) && !i_s) {
         if (!grid_is_in_original_state) return;
@@ -5100,7 +5103,7 @@ function $f70cc6dfcadf0fd5$export$d7841e452f2e59a8(_ref) {
         var _close_modal_;
         (_close_modal_ = close_modal_) === null || _close_modal_ === void 0 || _close_modal_();
         set_extra_els_in_results_container_("");
-      } else if (is_small()) {
+      } else if (isSmall()()) {
         var _open_modal_;
         if ($3hooq$solidjs.untrack(() => input_modal_open_ === null || input_modal_open_ === void 0 ? void 0 : input_modal_open_())) {
           // we don't want to shove another modal into the users face, silently close the filters for them
@@ -5136,15 +5139,6 @@ function $f70cc6dfcadf0fd5$export$d7841e452f2e59a8(_ref) {
         dismiss_modal_: dismiss_modal_,
         i18n_: i18n_
       }, filterModalParent_));
-      const {
-        remove: remove
-      } = $3hooq$depictaiutilishared.javascript_media_query("(max-width:651px)", _ref3 => {
-        let {
-          matches: matches
-        } = _ref3;
-        return set_is_small(matches);
-      });
-      cleanup_promise.then(remove);
     })();
     get_extra_filters_button_ === null || get_extra_filters_button_ === void 0 || get_extra_filters_button_(make_open_filters_button());
     get_extra_sorting_button_ === null || get_extra_sorting_button_ === void 0 || get_extra_sorting_button_(make_open_sorting_button());
@@ -5172,7 +5166,7 @@ function $f70cc6dfcadf0fd5$export$d7841e452f2e59a8(_ref) {
     }
   });
 }
-function $f70cc6dfcadf0fd5$var$OpenFiltersButton(_ref4) {
+function $f70cc6dfcadf0fd5$var$OpenFiltersButton(_ref3) {
   let {
     i18n_: i18n_,
     search_filters_open_: search_filters_open_,
@@ -5181,7 +5175,7 @@ function $f70cc6dfcadf0fd5$var$OpenFiltersButton(_ref4) {
     tabindex_: tabindex_,
     number_of_rendered_selected_filters_items_: [num_selected_filters],
     hide_button_: hide_button_
-  } = _ref4;
+  } = _ref3;
   const filters_closed = $3hooq$solidjs.createMemo(() => !search_filters_open_[0]());
   // We assume in embedded_num_products that this is a single HTMLElement so pls change there if you change it here
   return $3hooq$solidjsweb.ssr($f70cc6dfcadf0fd5$var$_tmpl$5, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.ssrStyle(hide_button_() ? {
@@ -5207,7 +5201,7 @@ function $f70cc6dfcadf0fd5$var$OpenFiltersButton(_ref4) {
     }
   })), $3hooq$solidjsweb.escape(i18n_.filter_text_()));
 }
-function $f70cc6dfcadf0fd5$var$OpenSortingButton(_ref5) {
+function $f70cc6dfcadf0fd5$var$OpenSortingButton(_ref4) {
   var _meta_of_currently_se;
   let {
     i18n_: i18n_,
@@ -5218,7 +5212,7 @@ function $f70cc6dfcadf0fd5$var$OpenSortingButton(_ref5) {
     sort_button_width_: sort_button_width_,
     tabindex_: tabindex_,
     meta_of_currently_selected_sorting_: meta_of_currently_selected_sorting_
-  } = _ref5;
+  } = _ref4;
   const sorting_closed = $3hooq$solidjs.createMemo(() => !search_sorting_open_[0]());
   // We assume in embedded_num_products that this is a single HTMLElement so pls change there if you change it here
   return $3hooq$solidjsweb.ssr($f70cc6dfcadf0fd5$var$_tmpl$6, $3hooq$solidjsweb.ssrHydrationKey(), "".concat(!sorting_closed() ? "major" : "", " ").concat(sorting_closed() ? "minor" : "", " toggle-button for-sorting major-minor-transition"), $3hooq$solidjsweb.ssrAttribute("tabindex", $3hooq$solidjsweb.escape(tabindex_, true), false) + $3hooq$solidjsweb.ssrAttribute("aria-label", $3hooq$solidjsweb.escape((sorting_closed() ? i18n_.open_sorting_ : i18n_.close_sorting_)(), true), false), $3hooq$solidjsweb.ssrStyle(sort_button_width_ !== null && sort_button_width_ !== void 0 && sort_button_width_() ? {
@@ -6687,13 +6681,18 @@ function $c19709057a32b2e7$export$780a853d15174484(_ref) {
     }
   }));
 }
-function $0c035bbe7e30b438$export$7a92d995f1bf3592(history_content_blocks_, plp_meta, content_blocks_by_row_, router_) {
+function $0c035bbe7e30b438$export$7a92d995f1bf3592(history_content_blocks_, plp_meta, content_blocks_by_row_, router_, products_request_loading_) {
   let hasSeenContentBlock = false;
   const [historyContentBlocks, setHistoryContentBlocks] = history_content_blocks_;
   const contentComponents = new Map();
-  $3hooq$solidjs.createEffect(() => {
+  const delayedServerBlocks = $3hooq$solidjs.createMemo(prev => {
     var _plp_meta;
-    const serverContentBlock = (_plp_meta = plp_meta()) === null || _plp_meta === void 0 ? void 0 : _plp_meta.content_blocks;
+    // Do not update the server blocks while the products request is loading, to avoid this: https://depictaiworkspace.slack.com/archives/C01JB6E7K7G/p1750861454651319
+    if (products_request_loading_()) return prev;
+    return (_plp_meta = plp_meta()) === null || _plp_meta === void 0 ? void 0 : _plp_meta.content_blocks;
+  });
+  $3hooq$solidjs.createEffect(() => {
+    const serverContentBlock = delayedServerBlocks();
     const currentHistory = $3hooq$solidjs.untrack(historyContentBlocks);
     // Only write to the history if the content blocks have changed when a new backend results arrives (we have them in history so scroll restoration works when going back, even when running shopify without single page navigations where our script dies inbetween pages).
     if (serverContentBlock && JSON.stringify(serverContentBlock) !== JSON.stringify(currentHistory.blocks)) setHistoryContentBlocks({
@@ -6802,7 +6801,8 @@ function $ede6c70ecdca46fe$export$f7d2f673fc2f091d(_ref) {
     content_blocks_by_row_: content_blocks_by_row_,
     filterModalParent_: filterModalParent_,
     showSliderArrow_: showSliderArrow_,
-    hideCount0FilterOptions_: hideCount0FilterOptions_
+    hideCount0FilterOptions_: hideCount0FilterOptions_,
+    switchToFiltersDrawerBreakpoint_: switchToFiltersDrawerBreakpoint_
   } = _ref;
   let results_for;
   let only_show_filters_opener_;
@@ -6898,7 +6898,7 @@ function $ede6c70ecdca46fe$export$f7d2f673fc2f091d(_ref) {
     setMetaRequestsForQuery(prev => prev.set(query.id_type_ + query.id_to_query_for_, listing));
     return result;
   }));
-  const contentBlocksByRow = $0c035bbe7e30b438$export$7a92d995f1bf3592(history_content_blocks_, plp_meta, content_blocks_by_row_, router_);
+  const contentBlocksByRow = $0c035bbe7e30b438$export$7a92d995f1bf3592(history_content_blocks_, plp_meta, content_blocks_by_row_, router_, () => plp_products_.loading);
   const countOfProductsForUI = $e335e2ff536c1a0b$export$a86bc18439445599(plp_products_, all_products_loaded_, currentlyLoadedDisplays);
   const available_sortings_ = $3hooq$solidjs.createMemo(() => {
     var _plp_products_, _plp_products_$sorts;
@@ -7025,6 +7025,7 @@ function $ede6c70ecdca46fe$export$f7d2f673fc2f091d(_ref) {
     sort_and_filter_disabled_: sort_and_filter_disabled_,
     filterModalParent_: filterModalParent_,
     hideCount0FilterOptions_: hideCount0FilterOptions_,
+    switchToFiltersDrawerBreakpoint_: switchToFiltersDrawerBreakpoint_,
     ...extra_sort_and_filter_args_
   });
   $3hooq$depictaiutilisharedlatest.catchify((0, $fef4890f1f8e0544$export$6e49da55e449af7c))({
@@ -12760,7 +12761,8 @@ function $739c927cbecd26b0$export$a54ec244c8863715(_ref) {
     filterModalParent_: filterModalParent_,
     class_: class_,
     showSliderArrow_: showSliderArrow_,
-    hideCount0FilterOptions_: hideCount0FilterOptions_
+    hideCount0FilterOptions_: hideCount0FilterOptions_,
+    switchToFiltersDrawerBreakpoint_: switchToFiltersDrawerBreakpoint_
   } = _ref;
   const [get_sorting] = current_sorting_;
   const all_products_loaded_ = $3hooq$solidjs.createSignal(false);
@@ -12881,7 +12883,8 @@ function $739c927cbecd26b0$export$a54ec244c8863715(_ref) {
     expanded_hierarchical_filters_: expanded_hierarchical_filters_,
     number_of_rendered_selected_filters_items_: number_of_rendered_selected_filters_items_,
     filterModalParent_: filterModalParent_,
-    hideCount0FilterOptions_: hideCount0FilterOptions_
+    hideCount0FilterOptions_: hideCount0FilterOptions_,
+    switchToFiltersDrawerBreakpoint_: switchToFiltersDrawerBreakpoint_
   });
   const results_filters = $3hooq$solidjs.createSignal();
   const shouldActuallyShowInputField = $3hooq$solidjs.createMemo(() => {
@@ -13586,6 +13589,7 @@ function $ddd39c5f36f49703$export$f2dc7e4e4aa11abb(props) {
       search_sorting_open_: state_.sorting_open,
       expanded_filters_: state_.expanded_filters,
       content_results_rows_: state_.content_results_rows,
+      switchToFiltersDrawerBreakpoint_: () => props.switchToFiltersDrawerBreakpoint_,
       content_blocks_by_row_: () => props.content_blocks_by_row,
       router_: shared_properties.router_,
       make_category_suggestion_card_: shared_properties.enable_category_suggestions_ ? category_suggestion_ => {
@@ -14284,7 +14288,8 @@ function $c10e33c4681f8c9b$export$e2bf8ce7779e827e(props) {
       })),
       product_card_template_: product_card_template,
       sorting_query_param_: sorting_query_param_,
-      filter_query_param_prefix_: filter_query_param_prefix_
+      filter_query_param_prefix_: filter_query_param_prefix_,
+      switchToFiltersDrawerBreakpoint_: () => props.switchToFiltersDrawerBreakpoint_
     });
   }, "Entire CategoryPage failed");
 }

package/server/ES10/index.d.ts

@@ -11,7 +11,7 @@ import { GetListingRequest } from "@depict-ai/types/api/GetListingRequest";
 import { BaseSearchRequestV3 } from "@depict-ai/types/api/BaseSearchRequestV3";
 import { FeaturedInDisplay } from "@depict-ai/types/api/FeaturedInResponseV3";
 import { SearchFilter as _SearchFilter3 } from "@depict-ai/types/api/SearchRequestV2";
-export const version = "4.10.4";
+export const version = "4.10.6";
 /**
  * Use `javascript_media_query` but return a reactive accessor instead of taking a callback function
  */
@@ -1318,7 +1318,6 @@ type RecsAPIWrapperOptions = {
  * @param market The market to fetch recs for. Depict will provide this to you. (Example: "sv" or "sv-se".)
  * @param locale The locale to fetch for.
  * @param type The type of the recommendations, e.g. `front_page`, `after_basket, `related`, etc. Ask Depict for this.
- * @param categoryId When requesting recommendations for a category page, pass the id of the category page as `categoryId`.
  * @param productId When requesting recommendations for a single product, e.g. on a product detail page, pass the id of the product as `productId`.
  * @param productIds When requesting recommendations that should take multiple products into account, i.e. the contents of the basket/cart, pass an array of product ids as `productIds`
  * @param sessionId Optional unique identifier of the current session. Only necessary when performing server side requests to Depict.
@@ -1502,6 +1501,7 @@ export function SearchPage<OriginalDisplay extends Display, TransformedDisplay e
   class?: string;
   showSliderArrow_?: boolean;
   hideCount0FilterOptions_?: boolean;
+  switchToFiltersDrawerBreakpoint_?: number | undefined;
 }): import("@depict-ai/utilishared").Node_Array;
 /**
  * Connects the height of the search field to the height of the aligner.
@@ -1541,7 +1541,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;
@@ -1613,6 +1613,7 @@ export function CategoryPage<OriginalDisplay extends Display, OutputDisplay exte
   grid_spacing: SDKGridSpacing;
   cols_at_size: SDKColsAtSize;
   product_card_template: ProductCardTemplate<[OutputDisplay] extends [never] ? OriginalDisplay : ModernDisplayWithPageUrl<OutputDisplay>>;
+  switchToFiltersDrawerBreakpoint_?: number | undefined;
   show_quicklinks?: boolean;
   show_breadcrumbs?: boolean;
   category_title: typeof CategoryTitle | typeof embedded_num_products;
@@ -1622,5 +1623,5 @@ export function CategoryPage<OriginalDisplay extends Display, OutputDisplay exte
   filterModalParent_?: HTMLElement | ShadowRoot;
   showSliderArrow_?: boolean;
   hideCount0FilterOptions_?: boolean;
-}): import("@depict-ai/utilishared/latest").Node_Array;
+}): import("@depict-ai/utilishared").Node_Array;
 export type { SearchFilter } from "@depict-ai/types/api/SearchRequestV3";

package/server/ES10/index.js

@@ -10,7 +10,7 @@ import $b8hua$babelruntimehelpersclassPrivateFieldGet from "@babel/runtime/helpe
 /*! Depict.ai search and product listing SDK */
 import { register_es_version } from "../../multi_import_deduplicator.mjs";
 register_es_version("ui", "ES10");
-const $8db9a15135765c11$export$83d89fbfd8236492 = "4.10.4";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "4.10.6";
 function $00a5b94f0c11efbb$export$d9f36cf74e24d595(media_query) {
   const signal = $b8hua$createSignal(false);
   $b8hua$onCleanup($b8hua$javascript_media_query(media_query, _ref => {
@@ -4902,7 +4902,8 @@ function $7396052a1484264f$export$d7841e452f2e59a8(_ref) {
     get_extra_filters_button_: get_extra_filters_button_,
     get_extra_sorting_button_: get_extra_sorting_button_,
     filterModalParent_: filterModalParent_,
-    hideCount0FilterOptions_: hideCount0FilterOptions_
+    hideCount0FilterOptions_: hideCount0FilterOptions_,
+    switchToFiltersDrawerBreakpoint_: switchToFiltersDrawerBreakpoint_
   } = _ref;
   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
@@ -4911,11 +4912,13 @@ function $7396052a1484264f$export$d7841e452f2e59a8(_ref) {
       selected_filters_: selected_filters_,
       local_filter_cache_: local_filter_cache_
     });
-    const cleanup_promise = new Promise(r => $b8hua$onCleanup(r));
     const [filters_open, set_filters_open] = search_filters_open_;
     const [sorting_open, set_sorting_open] = search_sorting_open_;
     const [get_current_sorting_] = current_sorting_;
-    const [is_small, set_is_small] = $b8hua$createSignal(false);
+    const isSmall = $b8hua$createMemo(() => {
+      var _switchToFiltersDrawe;
+      return $00a5b94f0c11efbb$export$d9f36cf74e24d595("(max-width:".concat((_switchToFiltersDrawe = switchToFiltersDrawerBreakpoint_()) !== null && _switchToFiltersDrawe !== void 0 ? _switchToFiltersDrawe : 651, "px)"));
+    });
     const dismiss_modal_ = $b8hua$catchify1(() => {
       set_filters_open(false);
       set_sorting_open(false);
@@ -4979,7 +4982,7 @@ function $7396052a1484264f$export$d7841e452f2e59a8(_ref) {
     $b8hua$createComputed(() => {
       const fi_o = filters_open();
       const so_o = sorting_open();
-      const i_s = is_small();
+      const i_s = isSmall()();
       // we need to always read all the signal if we have them in the if-statement the value of it changes when the computation runs
       if ((fi_o || so_o) && !i_s) {
         if (!grid_is_in_original_state) return;
@@ -4995,7 +4998,7 @@ function $7396052a1484264f$export$d7841e452f2e59a8(_ref) {
         var _close_modal_;
         (_close_modal_ = close_modal_) === null || _close_modal_ === void 0 || _close_modal_();
         set_extra_els_in_results_container_("");
-      } else if (is_small()) {
+      } else if (isSmall()()) {
         var _open_modal_;
         if ($b8hua$untrack(() => input_modal_open_ === null || input_modal_open_ === void 0 ? void 0 : input_modal_open_())) {
           // we don't want to shove another modal into the users face, silently close the filters for them
@@ -5031,15 +5034,6 @@ function $7396052a1484264f$export$d7841e452f2e59a8(_ref) {
         dismiss_modal_: dismiss_modal_,
         i18n_: i18n_
       }, filterModalParent_));
-      const {
-        remove: remove
-      } = $b8hua$javascript_media_query("(max-width:651px)", _ref3 => {
-        let {
-          matches: matches
-        } = _ref3;
-        return set_is_small(matches);
-      });
-      cleanup_promise.then(remove);
     })();
     get_extra_filters_button_ === null || get_extra_filters_button_ === void 0 || get_extra_filters_button_(make_open_filters_button());
     get_extra_sorting_button_ === null || get_extra_sorting_button_ === void 0 || get_extra_sorting_button_(make_open_sorting_button());
@@ -5067,7 +5061,7 @@ function $7396052a1484264f$export$d7841e452f2e59a8(_ref) {
     }
   });
 }
-function $7396052a1484264f$var$OpenFiltersButton(_ref4) {
+function $7396052a1484264f$var$OpenFiltersButton(_ref3) {
   let {
     i18n_: i18n_,
     search_filters_open_: search_filters_open_,
@@ -5076,7 +5070,7 @@ function $7396052a1484264f$var$OpenFiltersButton(_ref4) {
     tabindex_: tabindex_,
     number_of_rendered_selected_filters_items_: [num_selected_filters],
     hide_button_: hide_button_
-  } = _ref4;
+  } = _ref3;
   const filters_closed = $b8hua$createMemo(() => !search_filters_open_[0]());
   // We assume in embedded_num_products that this is a single HTMLElement so pls change there if you change it here
   return $b8hua$ssr($7396052a1484264f$var$_tmpl$5, $b8hua$ssrHydrationKey(), $b8hua$ssrStyle(hide_button_() ? {
@@ -5102,7 +5096,7 @@ function $7396052a1484264f$var$OpenFiltersButton(_ref4) {
     }
   })), $b8hua$escape(i18n_.filter_text_()));
 }
-function $7396052a1484264f$var$OpenSortingButton(_ref5) {
+function $7396052a1484264f$var$OpenSortingButton(_ref4) {
   var _meta_of_currently_se;
   let {
     i18n_: i18n_,
@@ -5113,7 +5107,7 @@ function $7396052a1484264f$var$OpenSortingButton(_ref5) {
     sort_button_width_: sort_button_width_,
     tabindex_: tabindex_,
     meta_of_currently_selected_sorting_: meta_of_currently_selected_sorting_
-  } = _ref5;
+  } = _ref4;
   const sorting_closed = $b8hua$createMemo(() => !search_sorting_open_[0]());
   // We assume in embedded_num_products that this is a single HTMLElement so pls change there if you change it here
   return $b8hua$ssr($7396052a1484264f$var$_tmpl$6, $b8hua$ssrHydrationKey(), "".concat(!sorting_closed() ? "major" : "", " ").concat(sorting_closed() ? "minor" : "", " toggle-button for-sorting major-minor-transition"), $b8hua$ssrAttribute("tabindex", $b8hua$escape(tabindex_, true), false) + $b8hua$ssrAttribute("aria-label", $b8hua$escape((sorting_closed() ? i18n_.open_sorting_ : i18n_.close_sorting_)(), true), false), $b8hua$ssrStyle(sort_button_width_ !== null && sort_button_width_ !== void 0 && sort_button_width_() ? {
@@ -6582,13 +6576,18 @@ function $3b772ef9a35560fe$export$780a853d15174484(_ref) {
     }
   }));
 }
-function $12ff24fdc4b26d88$export$7a92d995f1bf3592(history_content_blocks_, plp_meta, content_blocks_by_row_, router_) {
+function $12ff24fdc4b26d88$export$7a92d995f1bf3592(history_content_blocks_, plp_meta, content_blocks_by_row_, router_, products_request_loading_) {
   let hasSeenContentBlock = false;
   const [historyContentBlocks, setHistoryContentBlocks] = history_content_blocks_;
   const contentComponents = new Map();
-  $b8hua$createEffect(() => {
+  const delayedServerBlocks = $b8hua$createMemo(prev => {
     var _plp_meta;
-    const serverContentBlock = (_plp_meta = plp_meta()) === null || _plp_meta === void 0 ? void 0 : _plp_meta.content_blocks;
+    // Do not update the server blocks while the products request is loading, to avoid this: https://depictaiworkspace.slack.com/archives/C01JB6E7K7G/p1750861454651319
+    if (products_request_loading_()) return prev;
+    return (_plp_meta = plp_meta()) === null || _plp_meta === void 0 ? void 0 : _plp_meta.content_blocks;
+  });
+  $b8hua$createEffect(() => {
+    const serverContentBlock = delayedServerBlocks();
     const currentHistory = $b8hua$untrack(historyContentBlocks);
     // Only write to the history if the content blocks have changed when a new backend results arrives (we have them in history so scroll restoration works when going back, even when running shopify without single page navigations where our script dies inbetween pages).
     if (serverContentBlock && JSON.stringify(serverContentBlock) !== JSON.stringify(currentHistory.blocks)) setHistoryContentBlocks({
@@ -6697,7 +6696,8 @@ function $4b4b262708b516ee$export$f7d2f673fc2f091d(_ref) {
     content_blocks_by_row_: content_blocks_by_row_,
     filterModalParent_: filterModalParent_,
     showSliderArrow_: showSliderArrow_,
-    hideCount0FilterOptions_: hideCount0FilterOptions_
+    hideCount0FilterOptions_: hideCount0FilterOptions_,
+    switchToFiltersDrawerBreakpoint_: switchToFiltersDrawerBreakpoint_
   } = _ref;
   let results_for;
   let only_show_filters_opener_;
@@ -6793,7 +6793,7 @@ function $4b4b262708b516ee$export$f7d2f673fc2f091d(_ref) {
     setMetaRequestsForQuery(prev => prev.set(query.id_type_ + query.id_to_query_for_, listing));
     return result;
   }));
-  const contentBlocksByRow = $12ff24fdc4b26d88$export$7a92d995f1bf3592(history_content_blocks_, plp_meta, content_blocks_by_row_, router_);
+  const contentBlocksByRow = $12ff24fdc4b26d88$export$7a92d995f1bf3592(history_content_blocks_, plp_meta, content_blocks_by_row_, router_, () => plp_products_.loading);
   const countOfProductsForUI = $0728458b46ee9d32$export$a86bc18439445599(plp_products_, all_products_loaded_, currentlyLoadedDisplays);
   const available_sortings_ = $b8hua$createMemo(() => {
     var _plp_products_, _plp_products_$sorts;
@@ -6920,6 +6920,7 @@ function $4b4b262708b516ee$export$f7d2f673fc2f091d(_ref) {
     sort_and_filter_disabled_: sort_and_filter_disabled_,
     filterModalParent_: filterModalParent_,
     hideCount0FilterOptions_: hideCount0FilterOptions_,
+    switchToFiltersDrawerBreakpoint_: switchToFiltersDrawerBreakpoint_,
     ...extra_sort_and_filter_args_
   });
   $b8hua$catchify((0, $5e6abec0dab4e610$export$6e49da55e449af7c))({
@@ -12655,7 +12656,8 @@ function $da279c5a540c6846$export$a54ec244c8863715(_ref) {
     filterModalParent_: filterModalParent_,
     class_: class_,
     showSliderArrow_: showSliderArrow_,
-    hideCount0FilterOptions_: hideCount0FilterOptions_
+    hideCount0FilterOptions_: hideCount0FilterOptions_,
+    switchToFiltersDrawerBreakpoint_: switchToFiltersDrawerBreakpoint_
   } = _ref;
   const [get_sorting] = current_sorting_;
   const all_products_loaded_ = $b8hua$createSignal(false);
@@ -12776,7 +12778,8 @@ function $da279c5a540c6846$export$a54ec244c8863715(_ref) {
     expanded_hierarchical_filters_: expanded_hierarchical_filters_,
     number_of_rendered_selected_filters_items_: number_of_rendered_selected_filters_items_,
     filterModalParent_: filterModalParent_,
-    hideCount0FilterOptions_: hideCount0FilterOptions_
+    hideCount0FilterOptions_: hideCount0FilterOptions_,
+    switchToFiltersDrawerBreakpoint_: switchToFiltersDrawerBreakpoint_
   });
   const results_filters = $b8hua$createSignal();
   const shouldActuallyShowInputField = $b8hua$createMemo(() => {
@@ -13481,6 +13484,7 @@ function $eb064bc3350276c1$export$f2dc7e4e4aa11abb(props) {
       search_sorting_open_: state_.sorting_open,
       expanded_filters_: state_.expanded_filters,
       content_results_rows_: state_.content_results_rows,
+      switchToFiltersDrawerBreakpoint_: () => props.switchToFiltersDrawerBreakpoint_,
       content_blocks_by_row_: () => props.content_blocks_by_row,
       router_: shared_properties.router_,
       make_category_suggestion_card_: shared_properties.enable_category_suggestions_ ? category_suggestion_ => {
@@ -14179,7 +14183,8 @@ function $8821a19349c36651$export$e2bf8ce7779e827e(props) {
       })),
       product_card_template_: product_card_template,
       sorting_query_param_: sorting_query_param_,
-      filter_query_param_prefix_: filter_query_param_prefix_
+      filter_query_param_prefix_: filter_query_param_prefix_,
+      switchToFiltersDrawerBreakpoint_: () => props.switchToFiltersDrawerBreakpoint_
     });
   }, "Entire CategoryPage failed");
 }