@depict-ai/ui 4.10.5 → 4.10.7

package/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.5";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.10.7";
 function $3e17e871e9d0911d$export$d9f36cf74e24d595(media_query) {
   const signal = $52FdA$solidjs.createSignal(false);
   $52FdA$solidjs.onCleanup($52FdA$depictaiutilishared.javascript_media_query(media_query, _ref => {
@@ -5738,6 +5738,11 @@ function $685149df41127abd$export$9bf11afa910f536e(_ref) {
     return new Promise(r => setTimeout(r, 300));
   });
   $52FdA$solidjs.onCleanup(resolve_cleanup_promise);
+  const handler = e => {
+    if (e.key === "Escape") dismiss_modal_();
+  };
+  addEventListener("keydown", handler);
+  $52FdA$solidjs.onCleanup(() => removeEventListener("keydown", handler));
   return [(() => {
     var _el$ = $52FdA$solidjsweb.getNextElement($685149df41127abd$var$_tmpl$2),
       _el$2 = _el$.firstChild,
@@ -6292,7 +6297,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
@@ -6301,11 +6307,13 @@ function $f70cc6dfcadf0fd5$export$d7841e452f2e59a8(_ref) {
       selected_filters_: selected_filters_,
       local_filter_cache_: local_filter_cache_
     });
-    const cleanup_promise = new Promise(r => $52FdA$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] = $52FdA$solidjs.createSignal(false);
+    const isSmall = $52FdA$solidjs.createMemo(() => {
+      var _switchToFiltersDrawe;
+      return $3e17e871e9d0911d$export$d9f36cf74e24d595("(max-width:".concat((_switchToFiltersDrawe = switchToFiltersDrawerBreakpoint_()) !== null && _switchToFiltersDrawe !== void 0 ? _switchToFiltersDrawe : 651, "px)"));
+    });
     const dismiss_modal_ = $52FdA$depictaiutilishared.catchify(() => {
       set_filters_open(false);
       set_sorting_open(false);
@@ -6369,7 +6377,7 @@ function $f70cc6dfcadf0fd5$export$d7841e452f2e59a8(_ref) {
     $52FdA$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;
@@ -6385,7 +6393,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 ($52FdA$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
@@ -6429,15 +6437,6 @@ function $f70cc6dfcadf0fd5$export$d7841e452f2e59a8(_ref) {
         dismiss_modal_: dismiss_modal_,
         i18n_: i18n_
       }, filterModalParent_));
-      const {
-        remove: remove
-      } = $52FdA$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());
@@ -6479,7 +6478,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_,
@@ -6488,7 +6487,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 = $52FdA$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 (() => {
@@ -6559,7 +6558,7 @@ function $f70cc6dfcadf0fd5$var$OpenFiltersButton(_ref4) {
     return _el$14;
   })();
 }
-function $f70cc6dfcadf0fd5$var$OpenSortingButton(_ref5) {
+function $f70cc6dfcadf0fd5$var$OpenSortingButton(_ref4) {
   let {
     i18n_: i18n_,
     get_current_sorting_: get_current_sorting_,
@@ -6569,7 +6568,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 = $52FdA$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 (() => {
@@ -8287,7 +8286,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_;
@@ -8520,6 +8520,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_
   });
   $52FdA$depictaiutilisharedlatest.catchify((0, $fef4890f1f8e0544$export$6e49da55e449af7c))({
@@ -15443,7 +15444,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_ = $52FdA$solidjs.createSignal(false);
@@ -15564,7 +15566,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 = $52FdA$solidjs.createSignal();
   const shouldActuallyShowInputField = $52FdA$solidjs.createMemo(() => {
@@ -16319,6 +16322,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_ => {
@@ -17026,7 +17030,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/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.5";
+export const version = "4.10.7";
 /**
  * Use `javascript_media_query` but return a reactive accessor instead of taking a callback function
  */
@@ -1501,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.
@@ -1612,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;

package/ES10/index.js

@@ -10,7 +10,7 @@ import $8tj43$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.5";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "4.10.7";
 function $00a5b94f0c11efbb$export$d9f36cf74e24d595(media_query) {
   const signal = $8tj43$createSignal(false);
   $8tj43$onCleanup($8tj43$javascript_media_query(media_query, _ref => {
@@ -5633,6 +5633,11 @@ function $082c4ed3e22f8d71$export$9bf11afa910f536e(_ref) {
     return new Promise(r => setTimeout(r, 300));
   });
   $8tj43$onCleanup(resolve_cleanup_promise);
+  const handler = e => {
+    if (e.key === "Escape") dismiss_modal_();
+  };
+  addEventListener("keydown", handler);
+  $8tj43$onCleanup(() => removeEventListener("keydown", handler));
   return [(() => {
     var _el$ = $8tj43$getNextElement($082c4ed3e22f8d71$var$_tmpl$2),
       _el$2 = _el$.firstChild,
@@ -6187,7 +6192,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
@@ -6196,11 +6202,13 @@ function $7396052a1484264f$export$d7841e452f2e59a8(_ref) {
       selected_filters_: selected_filters_,
       local_filter_cache_: local_filter_cache_
     });
-    const cleanup_promise = new Promise(r => $8tj43$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] = $8tj43$createSignal(false);
+    const isSmall = $8tj43$createMemo(() => {
+      var _switchToFiltersDrawe;
+      return $00a5b94f0c11efbb$export$d9f36cf74e24d595("(max-width:".concat((_switchToFiltersDrawe = switchToFiltersDrawerBreakpoint_()) !== null && _switchToFiltersDrawe !== void 0 ? _switchToFiltersDrawe : 651, "px)"));
+    });
     const dismiss_modal_ = $8tj43$catchify1(() => {
       set_filters_open(false);
       set_sorting_open(false);
@@ -6264,7 +6272,7 @@ function $7396052a1484264f$export$d7841e452f2e59a8(_ref) {
     $8tj43$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;
@@ -6280,7 +6288,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 ($8tj43$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
@@ -6324,15 +6332,6 @@ function $7396052a1484264f$export$d7841e452f2e59a8(_ref) {
         dismiss_modal_: dismiss_modal_,
         i18n_: i18n_
       }, filterModalParent_));
-      const {
-        remove: remove
-      } = $8tj43$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());
@@ -6374,7 +6373,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_,
@@ -6383,7 +6382,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 = $8tj43$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 (() => {
@@ -6454,7 +6453,7 @@ function $7396052a1484264f$var$OpenFiltersButton(_ref4) {
     return _el$14;
   })();
 }
-function $7396052a1484264f$var$OpenSortingButton(_ref5) {
+function $7396052a1484264f$var$OpenSortingButton(_ref4) {
   let {
     i18n_: i18n_,
     get_current_sorting_: get_current_sorting_,
@@ -6464,7 +6463,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 = $8tj43$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 (() => {
@@ -8182,7 +8181,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_;
@@ -8415,6 +8415,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_
   });
   $8tj43$catchify((0, $5e6abec0dab4e610$export$6e49da55e449af7c))({
@@ -15338,7 +15339,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_ = $8tj43$createSignal(false);
@@ -15459,7 +15461,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 = $8tj43$createSignal();
   const shouldActuallyShowInputField = $8tj43$createMemo(() => {
@@ -16214,6 +16217,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_ => {
@@ -16921,7 +16925,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");
 }

package/latest/index.cjs

@@ -109,7 +109,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.10.5";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "4.10.7";
 function $b54e6192d0caa293$export$d9f36cf74e24d595(media_query) {
   const signal = $gVhhF$solidjs.createSignal(false);
   $gVhhF$solidjs.onCleanup($gVhhF$depictaiutilishared.javascript_media_query(media_query, ({
@@ -5430,6 +5430,11 @@ function $1872ceb56ede7a52$export$9bf11afa910f536e({
     return new Promise(r => setTimeout(r, 300));
   });
   $gVhhF$solidjs.onCleanup(resolve_cleanup_promise);
+  const handler = e => {
+    if (e.key === "Escape") dismiss_modal_();
+  };
+  addEventListener("keydown", handler);
+  $gVhhF$solidjs.onCleanup(() => removeEventListener("keydown", handler));
   return [(() => {
     var _el$ = $gVhhF$solidjsweb.getNextElement($1872ceb56ede7a52$var$_tmpl$2),
       _el$2 = _el$.firstChild,
@@ -5946,7 +5951,8 @@ function $f8f64d05c525825b$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
@@ -5955,11 +5961,10 @@ function $f8f64d05c525825b$export$d7841e452f2e59a8({
       selected_filters_: selected_filters_,
       local_filter_cache_: local_filter_cache_
     });
-    const cleanup_promise = new Promise(r => $gVhhF$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] = $gVhhF$solidjs.createSignal(false);
+    const isSmall = $gVhhF$solidjs.createMemo(() => $b54e6192d0caa293$export$d9f36cf74e24d595(`(max-width:${switchToFiltersDrawerBreakpoint_() ?? 651}px)`));
     const dismiss_modal_ = $gVhhF$depictaiutilishared.catchify(() => {
       set_filters_open(false);
       set_sorting_open(false);
@@ -6011,7 +6016,7 @@ function $f8f64d05c525825b$export$d7841e452f2e59a8({
     $gVhhF$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;
@@ -6026,7 +6031,7 @@ function $f8f64d05c525825b$export$d7841e452f2e59a8({
       if (!filters_open() && !sorting_open()) {
         close_modal_?.();
         set_extra_els_in_results_container_("");
-      } else if (is_small()) {
+      } else if (isSmall()()) {
         if ($gVhhF$solidjs.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);
@@ -6068,12 +6073,6 @@ function $f8f64d05c525825b$export$d7841e452f2e59a8({
         dismiss_modal_: dismiss_modal_,
         i18n_: i18n_
       }, filterModalParent_));
-      const {
-        remove: remove
-      } = $gVhhF$depictaiutilishared.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());
@@ -7845,7 +7844,8 @@ function $840d88a04b2d22a7$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_;
@@ -8060,6 +8060,7 @@ function $840d88a04b2d22a7$export$f7d2f673fc2f091d({
     sort_and_filter_disabled_: sort_and_filter_disabled_,
     filterModalParent_: filterModalParent_,
     hideCount0FilterOptions_: hideCount0FilterOptions_,
+    switchToFiltersDrawerBreakpoint_: switchToFiltersDrawerBreakpoint_,
     ...extra_sort_and_filter_args_
   });
   $gVhhF$depictaiutilisharedlatest.catchify((0, $276380e4607fb9fb$export$6e49da55e449af7c))({
@@ -14567,7 +14568,8 @@ function $f1d7cb69f839a526$export$a54ec244c8863715({
   filterModalParent_: filterModalParent_,
   class_: class_,
   showSliderArrow_: showSliderArrow_,
-  hideCount0FilterOptions_: hideCount0FilterOptions_
+  hideCount0FilterOptions_: hideCount0FilterOptions_,
+  switchToFiltersDrawerBreakpoint_: switchToFiltersDrawerBreakpoint_
 }) {
   const [get_sorting] = current_sorting_;
   const all_products_loaded_ = $gVhhF$solidjs.createSignal(false);
@@ -14676,7 +14678,8 @@ function $f1d7cb69f839a526$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 = $gVhhF$solidjs.createSignal();
   const shouldActuallyShowInputField = $gVhhF$solidjs.createMemo(() => include_input_field_?.() ?? true); // default to showing input field
@@ -15337,6 +15340,7 @@ function $2c61e4cd8229c49a$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_ => {
@@ -15934,7 +15938,8 @@ function $14f289047713d67a$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/latest/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.5";
+export const version = "4.10.7";
 /**
  * Use `javascript_media_query` but return a reactive accessor instead of taking a callback function
  */
@@ -1501,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.
@@ -1612,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;

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.5";
+const $ec291e0010116877$export$83d89fbfd8236492 = "4.10.7";
 function $dc9262ef6f786812$export$d9f36cf74e24d595(media_query) {
   const signal = $9HbP8$createSignal(false);
   $9HbP8$onCleanup($9HbP8$javascript_media_query(media_query, ({
@@ -5328,6 +5328,11 @@ function $757dac7f7c6c5241$export$9bf11afa910f536e({
     return new Promise(r => setTimeout(r, 300));
   });
   $9HbP8$onCleanup(resolve_cleanup_promise);
+  const handler = e => {
+    if (e.key === "Escape") dismiss_modal_();
+  };
+  addEventListener("keydown", handler);
+  $9HbP8$onCleanup(() => removeEventListener("keydown", handler));
   return [(() => {
     var _el$ = $9HbP8$getNextElement($757dac7f7c6c5241$var$_tmpl$2),
       _el$2 = _el$.firstChild,
@@ -5844,7 +5849,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 +5859,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 +5914,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 +5929,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 +5971,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());
@@ -7743,7 +7742,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_;
@@ -7958,6 +7958,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))({
@@ -14465,7 +14466,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);
@@ -14574,7 +14576,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
@@ -15235,6 +15238,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_ => {
@@ -15832,7 +15836,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.5",
+  "version": "4.10.7",
   "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.5";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.10.7";
 function $3e17e871e9d0911d$export$d9f36cf74e24d595(media_query) {
   const signal = $3hooq$solidjs.createSignal(false);
   $3hooq$solidjs.onCleanup($3hooq$depictaiutilishared.javascript_media_query(media_query, _ref => {
@@ -4669,6 +4669,11 @@ function $685149df41127abd$export$9bf11afa910f536e(_ref) {
     return new Promise(r => setTimeout(r, 300));
   });
   $3hooq$solidjs.onCleanup(resolve_cleanup_promise);
+  const handler = e => {
+    if (e.key === "Escape") dismiss_modal_();
+  };
+  addEventListener("keydown", handler);
+  $3hooq$solidjs.onCleanup(() => removeEventListener("keydown", handler));
   return [$3hooq$solidjsweb.ssr($685149df41127abd$var$_tmpl$2, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.ssrAttribute("aria-label", $3hooq$solidjsweb.escape(i18n_.close_(), true), false), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $083b2336093176cf$export$3b621d86b1566b2), {})), $3hooq$solidjsweb.ssrStyle(modal_scrolling_prevented[0]() ? "overflow:hidden" : ""), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $4cfe8400ed3f92c4$export$6c6d7a51fa9aa15d), {
     is_open_: [sorting_expanded, set_sorting_expanded],
     get details_() {
@@ -5007,7 +5012,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 +5022,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 +5092,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 +5108,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 +5144,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 +5171,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 +5180,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 +5206,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 +5217,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_() ? {
@@ -6807,7 +6806,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_;
@@ -7030,6 +7030,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))({
@@ -12765,7 +12766,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);
@@ -12886,7 +12888,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(() => {
@@ -13591,6 +13594,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_ => {
@@ -14289,7 +14293,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.5";
+export const version = "4.10.7";
 /**
  * Use `javascript_media_query` but return a reactive accessor instead of taking a callback function
  */
@@ -1501,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.
@@ -1612,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;

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.5";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "4.10.7";
 function $00a5b94f0c11efbb$export$d9f36cf74e24d595(media_query) {
   const signal = $b8hua$createSignal(false);
   $b8hua$onCleanup($b8hua$javascript_media_query(media_query, _ref => {
@@ -4564,6 +4564,11 @@ function $082c4ed3e22f8d71$export$9bf11afa910f536e(_ref) {
     return new Promise(r => setTimeout(r, 300));
   });
   $b8hua$onCleanup(resolve_cleanup_promise);
+  const handler = e => {
+    if (e.key === "Escape") dismiss_modal_();
+  };
+  addEventListener("keydown", handler);
+  $b8hua$onCleanup(() => removeEventListener("keydown", handler));
   return [$b8hua$ssr($082c4ed3e22f8d71$var$_tmpl$2, $b8hua$ssrHydrationKey(), $b8hua$ssrAttribute("aria-label", $b8hua$escape(i18n_.close_(), true), false), $b8hua$escape($b8hua$createComponent((0, $9783d437ad61594c$export$3b621d86b1566b2), {})), $b8hua$ssrStyle(modal_scrolling_prevented[0]() ? "overflow:hidden" : ""), $b8hua$escape($b8hua$createComponent((0, $ad371564683947ab$export$6c6d7a51fa9aa15d), {
     is_open_: [sorting_expanded, set_sorting_expanded],
     get details_() {
@@ -4902,7 +4907,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 +4917,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 +4987,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 +5003,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 +5039,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 +5066,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 +5075,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 +5101,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 +5112,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_() ? {
@@ -6702,7 +6701,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_;
@@ -6925,6 +6925,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))({
@@ -12660,7 +12661,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);
@@ -12781,7 +12783,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(() => {
@@ -13486,6 +13489,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_ => {
@@ -14184,7 +14188,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");
 }

package/server/latest/index.cjs

@@ -109,7 +109,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.10.5";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "4.10.7";
 function $b54e6192d0caa293$export$d9f36cf74e24d595(media_query) {
   const signal = $5vyXB$solidjs.createSignal(false);
   $5vyXB$solidjs.onCleanup($5vyXB$depictaiutilishared.javascript_media_query(media_query, ({
@@ -4407,6 +4407,11 @@ function $1872ceb56ede7a52$export$9bf11afa910f536e({
     return new Promise(r => setTimeout(r, 300));
   });
   $5vyXB$solidjs.onCleanup(resolve_cleanup_promise);
+  const handler = e => {
+    if (e.key === "Escape") dismiss_modal_();
+  };
+  addEventListener("keydown", handler);
+  $5vyXB$solidjs.onCleanup(() => removeEventListener("keydown", handler));
   return [$5vyXB$solidjsweb.ssr($1872ceb56ede7a52$var$_tmpl$2, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.ssrAttribute("aria-label", $5vyXB$solidjsweb.escape(i18n_.close_(), true), false), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $c77c68e559a1506c$export$3b621d86b1566b2), {})), $5vyXB$solidjsweb.ssrStyle(modal_scrolling_prevented[0]() ? "overflow:hidden" : ""), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $a69e505a12a77874$export$6c6d7a51fa9aa15d), {
     is_open_: [sorting_expanded, set_sorting_expanded],
     get details_() {
@@ -4710,7 +4715,8 @@ function $f8f64d05c525825b$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
@@ -4719,11 +4725,10 @@ function $f8f64d05c525825b$export$d7841e452f2e59a8({
       selected_filters_: selected_filters_,
       local_filter_cache_: local_filter_cache_
     });
-    const cleanup_promise = new Promise(r => $5vyXB$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] = $5vyXB$solidjs.createSignal(false);
+    const isSmall = $5vyXB$solidjs.createMemo(() => $b54e6192d0caa293$export$d9f36cf74e24d595(`(max-width:${switchToFiltersDrawerBreakpoint_() ?? 651}px)`));
     const dismiss_modal_ = $5vyXB$depictaiutilishared.catchify(() => {
       set_filters_open(false);
       set_sorting_open(false);
@@ -4775,7 +4780,7 @@ function $f8f64d05c525825b$export$d7841e452f2e59a8({
     $5vyXB$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;
@@ -4790,7 +4795,7 @@ function $f8f64d05c525825b$export$d7841e452f2e59a8({
       if (!filters_open() && !sorting_open()) {
         close_modal_?.();
         set_extra_els_in_results_container_("");
-      } else if (is_small()) {
+      } else if (isSmall()()) {
         if ($5vyXB$solidjs.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);
@@ -4824,12 +4829,6 @@ function $f8f64d05c525825b$export$d7841e452f2e59a8({
         dismiss_modal_: dismiss_modal_,
         i18n_: i18n_
       }, filterModalParent_));
-      const {
-        remove: remove
-      } = $5vyXB$depictaiutilishared.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());
@@ -6418,7 +6417,8 @@ function $840d88a04b2d22a7$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_;
@@ -6623,6 +6623,7 @@ function $840d88a04b2d22a7$export$f7d2f673fc2f091d({
     sort_and_filter_disabled_: sort_and_filter_disabled_,
     filterModalParent_: filterModalParent_,
     hideCount0FilterOptions_: hideCount0FilterOptions_,
+    switchToFiltersDrawerBreakpoint_: switchToFiltersDrawerBreakpoint_,
     ...extra_sort_and_filter_args_
   });
   $5vyXB$depictaiutilisharedlatest.catchify((0, $276380e4607fb9fb$export$6e49da55e449af7c))({
@@ -11970,7 +11971,8 @@ function $f1d7cb69f839a526$export$a54ec244c8863715({
   filterModalParent_: filterModalParent_,
   class_: class_,
   showSliderArrow_: showSliderArrow_,
-  hideCount0FilterOptions_: hideCount0FilterOptions_
+  hideCount0FilterOptions_: hideCount0FilterOptions_,
+  switchToFiltersDrawerBreakpoint_: switchToFiltersDrawerBreakpoint_
 }) {
   const [get_sorting] = current_sorting_;
   const all_products_loaded_ = $5vyXB$solidjs.createSignal(false);
@@ -12079,7 +12081,8 @@ function $f1d7cb69f839a526$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 = $5vyXB$solidjs.createSignal();
   const shouldActuallyShowInputField = $5vyXB$solidjs.createMemo(() => include_input_field_?.() ?? true); // default to showing input field
@@ -12690,6 +12693,7 @@ function $2c61e4cd8229c49a$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_ => {
@@ -13278,7 +13282,8 @@ function $14f289047713d67a$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/latest/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.5";
+export const version = "4.10.7";
 /**
  * Use `javascript_media_query` but return a reactive accessor instead of taking a callback function
  */
@@ -1501,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.
@@ -1612,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;

package/server/latest/index.js

@@ -7,7 +7,7 @@ import { createStore as $i7OB2$createStore, reconcile as $i7OB2$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.5";
+const $ec291e0010116877$export$83d89fbfd8236492 = "4.10.7";
 function $dc9262ef6f786812$export$d9f36cf74e24d595(media_query) {
   const signal = $i7OB2$createSignal(false);
   $i7OB2$onCleanup($i7OB2$javascript_media_query(media_query, ({
@@ -4305,6 +4305,11 @@ function $757dac7f7c6c5241$export$9bf11afa910f536e({
     return new Promise(r => setTimeout(r, 300));
   });
   $i7OB2$onCleanup(resolve_cleanup_promise);
+  const handler = e => {
+    if (e.key === "Escape") dismiss_modal_();
+  };
+  addEventListener("keydown", handler);
+  $i7OB2$onCleanup(() => removeEventListener("keydown", handler));
   return [$i7OB2$ssr($757dac7f7c6c5241$var$_tmpl$2, $i7OB2$ssrHydrationKey(), $i7OB2$ssrAttribute("aria-label", $i7OB2$escape(i18n_.close_(), true), false), $i7OB2$escape($i7OB2$createComponent((0, $19976a74d273070d$export$3b621d86b1566b2), {})), $i7OB2$ssrStyle(modal_scrolling_prevented[0]() ? "overflow:hidden" : ""), $i7OB2$escape($i7OB2$createComponent((0, $6bb0a0c563dff4bb$export$6c6d7a51fa9aa15d), {
     is_open_: [sorting_expanded, set_sorting_expanded],
     get details_() {
@@ -4608,7 +4613,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
@@ -4617,11 +4623,10 @@ function $cdea4cf8c5c071ef$export$d7841e452f2e59a8({
       selected_filters_: selected_filters_,
       local_filter_cache_: local_filter_cache_
     });
-    const cleanup_promise = new Promise(r => $i7OB2$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] = $i7OB2$createSignal(false);
+    const isSmall = $i7OB2$createMemo(() => $dc9262ef6f786812$export$d9f36cf74e24d595(`(max-width:${switchToFiltersDrawerBreakpoint_() ?? 651}px)`));
     const dismiss_modal_ = $i7OB2$catchify1(() => {
       set_filters_open(false);
       set_sorting_open(false);
@@ -4673,7 +4678,7 @@ function $cdea4cf8c5c071ef$export$d7841e452f2e59a8({
     $i7OB2$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;
@@ -4688,7 +4693,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 ($i7OB2$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);
@@ -4722,12 +4727,6 @@ function $cdea4cf8c5c071ef$export$d7841e452f2e59a8({
         dismiss_modal_: dismiss_modal_,
         i18n_: i18n_
       }, filterModalParent_));
-      const {
-        remove: remove
-      } = $i7OB2$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());
@@ -6316,7 +6315,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_;
@@ -6521,6 +6521,7 @@ function $df5d81d0fe61ff21$export$f7d2f673fc2f091d({
     sort_and_filter_disabled_: sort_and_filter_disabled_,
     filterModalParent_: filterModalParent_,
     hideCount0FilterOptions_: hideCount0FilterOptions_,
+    switchToFiltersDrawerBreakpoint_: switchToFiltersDrawerBreakpoint_,
     ...extra_sort_and_filter_args_
   });
   $i7OB2$catchify((0, $641bba2917fe862b$export$6e49da55e449af7c))({
@@ -11868,7 +11869,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_ = $i7OB2$createSignal(false);
@@ -11977,7 +11979,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 = $i7OB2$createSignal();
   const shouldActuallyShowInputField = $i7OB2$createMemo(() => include_input_field_?.() ?? true); // default to showing input field
@@ -12588,6 +12591,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_ => {
@@ -13176,7 +13180,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");
 }