@depict-ai/react-ui 4.0.23 → 4.1.1

package/latest/index.cjs

@@ -23,16 +23,17 @@ $parcel$export(module.exports, "QuickLinks", () => $f16af0e861aff3d0$export$466c
 $parcel$export(module.exports, "BreadCrumbs", () => $d88e98b11c182b8e$export$5646050d516e06bc);
 $parcel$export(module.exports, "ComponentAligner", () => $883a881f7926405d$export$80e99ee6b29cadd2);
 $parcel$export(module.exports, "DepictProvider", () => $24b00503eef73528$export$9fac37a9c21c2f3b);
-$parcel$export(module.exports, "CategoryPage", () => $5aa5fcb9f8a2bebc$export$f7d2f673fc2f091d);
-$parcel$export(module.exports, "SearchPage", () => $7ad7a3d0011b7b1b$export$a54ec244c8863715);
+$parcel$export(module.exports, "CategoryPage", () => $03d75efbc2476217$export$f7d2f673fc2f091d);
+$parcel$export(module.exports, "SearchPage", () => $4e47e1e003da166e$export$a54ec244c8863715);
 $parcel$export(module.exports, "ImagePlaceholder", () => $df522c8a81ed5a01$export$3f37af283f8fb843);
 $parcel$export(module.exports, "TextPlaceholder", () => $7c8b440edc188ad5$export$89c6019e4baa40b1);
 $parcel$export(module.exports, "RecommendationGrid", () => $48732d1a919ddb4c$export$b0a773486c1c2312);
 $parcel$export(module.exports, "RecommendationSlider", () => $8ffd7da37fdd46be$export$82cfdc85a4d15688);
 $parcel$export(module.exports, "useSearchModal", () => $ae73b15c325f1b21$export$912994940e660d32);
-$parcel$export(module.exports, "useSearchField", () => $913da7f4d0bc77f2$export$9bb30bbe003b82e0);
+$parcel$export(module.exports, "useSearchField", () => $c8b22e24c4b8035c$export$9bb30bbe003b82e0);
 $parcel$export(module.exports, "useFetchRecommendations", () => $a134ea100690b628$export$6501da23a2770fc);
 $parcel$export(module.exports, "usePerformanceClient", () => $25c0a91312868994$export$38b98fae14bd1f64);
+$parcel$export(module.exports, "useCategoryFilterHelpers", () => $a2654d3e936d0024$export$72616730c1fad2f4);
 $parcel$export(module.exports, "CategoryTitle", () => $b03e4eee8610ebbe$re_export$CategoryTitle);
 $parcel$export(module.exports, "EmbeddedNumProducts", () => $b03e4eee8610ebbe$re_export$EmbeddedNumProducts);
 $parcel$export(module.exports, "SearchModalV2", () => $b03e4eee8610ebbe$re_export$SearchModalV2);
@@ -41,7 +42,7 @@ $parcel$export(module.exports, "version", () => $db7b67857900028b$export$83d89fb
 $parcel$export(module.exports, "Navigation", () => $b742053c966024b4$export$b8a61e5c71402559);
 /*! Depict.ai search and product listing react SDK wrapper */ // This is where the actual source of your React stuff should live
 // Note, if you add an export here, also add one in src-server/main.ts
-const $db7b67857900028b$export$83d89fbfd8236492 = "4.0.23";
+const $db7b67857900028b$export$83d89fbfd8236492 = "4.1.1";
 const $0b7cd4fb39fc3502$export$8e769ad4338a911e = {
   usedLocale: $2IzJs$solidjs.createSignal((0, $2IzJs$depictaiuilocales.defaultLocale)),
   search_instances: new Map(),
@@ -59,21 +60,21 @@ const $0b7cd4fb39fc3502$export$8e769ad4338a911e = {
   enable_content_search: $2IzJs$solidjs.createSignal(),
   disable_override_listing_id: $2IzJs$solidjs.createSignal()
 };
-let $b4d0d98857ed9934$var$run_on_href_change;
-let $b4d0d98857ed9934$var$old_href = location.href;
-function $b4d0d98857ed9934$export$74f3924c5027fe1d(cb) {
-  $b4d0d98857ed9934$var$run_on_href_change = cb;
+let $69121eedef466fe9$var$run_on_href_change;
+let $69121eedef466fe9$var$old_href = location.href;
+function $69121eedef466fe9$export$74f3924c5027fe1d(cb) {
+  $69121eedef466fe9$var$run_on_href_change = cb;
 }
 (0, $2IzJs$depictaiutilishared.instant_exec_on_suspect_history_change).add($2IzJs$depictaiutilishared.catchify(() => {
   const {
     href: href
   } = location;
-  if ($b4d0d98857ed9934$var$run_on_href_change && $b4d0d98857ed9934$var$old_href !== href) $b4d0d98857ed9934$var$run_on_href_change(href);
-  $b4d0d98857ed9934$var$old_href = href;
+  if ($69121eedef466fe9$var$run_on_href_change && $69121eedef466fe9$var$old_href !== href) $69121eedef466fe9$var$run_on_href_change(href);
+  $69121eedef466fe9$var$old_href = href;
 }));
-const $b4d0d98857ed9934$export$775e6b3892b5ad52 = (url = location) => url.pathname == $2IzJs$solidjs.untrack((0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).search_page_path_[0]); // might have changed therefore get it from globalState
-const $b4d0d98857ed9934$export$30c8a12df09be0e4 = (url = location) => (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).known_category_paths.has(url.pathname);
-function $b4d0d98857ed9934$export$f6e64e17bd69eeef({
+const $69121eedef466fe9$export$775e6b3892b5ad52 = (url = location) => url.pathname == $2IzJs$solidjs.untrack((0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).search_page_path_[0]); // might have changed therefore get it from globalState
+const $69121eedef466fe9$export$30c8a12df09be0e4 = (url = location) => (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).known_category_paths.has(url.pathname);
+function $69121eedef466fe9$export$f6e64e17bd69eeef({
   solid_component: solid_component,
   props: props,
   wrapper_type = "div",
@@ -106,7 +107,7 @@ function $b4d0d98857ed9934$export$f6e64e17bd69eeef({
     const dispose = render_function(() => solid_component(store, set_portals), wrapper_element);
     return dispose;
   }, []);
-  return $2IzJs$react.createElement((0, $2IzJs$react.Fragment), null, $2IzJs$react.createElement(wrapper_type, {
+  return /*#__PURE__*/$2IzJs$react.createElement((0, $2IzJs$react.Fragment), null, /*#__PURE__*/$2IzJs$react.createElement(wrapper_type, {
     ref: wrapper_element_ref,
     style: wrapper_style,
     ...(hydrate_function_when_ssr ? {
@@ -118,35 +119,13 @@ function $b4d0d98857ed9934$export$f6e64e17bd69eeef({
     } : {})
   }), ...portals);
 }
-function $b4d0d98857ed9934$export$e5139bbbb9a05035(component, is_set) {
-  return (...args) => {
-    const default_is_set = $2IzJs$solidjs.createMemo(() => !!((0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).merchant[0]() && (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).market[0]() && (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).usedLocale[0]()?.backend_locale_)); // Apparently Show re-renders kids otherwise even if the falsiness of the condition doesn't change
-    const should_show = $2IzJs$solidjs.createMemo(prev => {
-      if (!prev && (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).provider_is_updating[0]())
-        // Why `!prev`? See https://gitlab.com/depict-ai/depict.ai/-/merge_requests/7854#note_1495776987
-        // If we weren't showing the component and the DepictProvider is currently updating, wait for it to have finished updating before showing the component
-        // Otherwise as soon as tenant and market is set we render the CategoryPage, but we might not have a DepictCategory yet, see https://depictaiworkspace.slack.com/archives/C04UZ2Z0RNE/p1690895918347289?thread_ts=1688391305.529449&cid=C04UZ2Z0RNE
-        return false;
-      return (is_set || default_is_set)();
-    });
-    // @ts-ignore
-    return $2IzJs$solidjs.createComponent((0, $2IzJs$solidjs.Show), {
-      get when() {
-        return should_show();
-      },
-      get children() {
-        return component(...args);
-      }
-    });
-  };
-}
 let $6319748b4f0426f0$var$set = false;
 let $6319748b4f0426f0$var$padding_animation;
 function $6319748b4f0426f0$export$6453cbc34515a94d() {
   /// WARNING WARNING WARNING
   // If you are debugging scroll restoration, make sure you're not in strict mode!!!!! Scroll restoration in nextjs won't work in strict mode because react will nuke all our elements from the DOM and render them again during going back
   // Next 13.x+ has strict mode by default, opt out by setting reactStrictMode: false in next.config.js
-  const are_on_search_or_category_page = () => $b4d0d98857ed9934$export$775e6b3892b5ad52() || $b4d0d98857ed9934$export$30c8a12df09be0e4();
+  const are_on_search_or_category_page = () => $69121eedef466fe9$export$775e6b3892b5ad52() || $69121eedef466fe9$export$30c8a12df09be0e4();
   if ($6319748b4f0426f0$var$set) return; // Just being safe
   $6319748b4f0426f0$var$set = true;
   // We used to initialise this variable with false which in some cases (scroll to top button in FloatingButtons) would cause the scroll to be blocked when it shouldn't (see https://depictaiworkspace.slack.com/archives/C058KQ3MU8Z/p1686141321127089?thread_ts=1686134246.109689&cid=C058KQ3MU8Z)
@@ -169,8 +148,8 @@ function $6319748b4f0426f0$export$6453cbc34515a94d() {
     const [get_category_page_in_dom] = (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).category_page_in_dom;
     const search_page_in_dom = $2IzJs$solidjs.untrack(get_search_page_in_dom);
     const category_page_in_dom = $2IzJs$solidjs.untrack(get_category_page_in_dom);
-    const new_is_search = $b4d0d98857ed9934$export$775e6b3892b5ad52();
-    const new_is_category = $b4d0d98857ed9934$export$30c8a12df09be0e4();
+    const new_is_search = $69121eedef466fe9$export$775e6b3892b5ad52();
+    const new_is_category = $69121eedef466fe9$export$30c8a12df09be0e4();
     let accessor_to_wait_for;
     if (search_page_in_dom && new_is_search || category_page_in_dom && new_is_category) {
       // Already on the page we're going to
@@ -233,9 +212,9 @@ const $bc389476eeb2b615$export$599d4515591ef232 = (relativeUrl, isReplace, scrol
     Page[Page["SEARCH"] = 1] = "SEARCH";
     Page[Page["CATEGORY"] = 2] = "CATEGORY";
   })(Page || (Page = {}));
-  const current_page = $b4d0d98857ed9934$export$775e6b3892b5ad52() ? Page.SEARCH : $b4d0d98857ed9934$export$30c8a12df09be0e4() ? Page.CATEGORY : Page.OTHER;
+  const current_page = $69121eedef466fe9$export$775e6b3892b5ad52() ? Page.SEARCH : $69121eedef466fe9$export$30c8a12df09be0e4() ? Page.CATEGORY : Page.OTHER;
   const target_u_o = new URL(relativeUrl, location.origin);
-  const target_page = $b4d0d98857ed9934$export$775e6b3892b5ad52(target_u_o) ? Page.SEARCH : $b4d0d98857ed9934$export$30c8a12df09be0e4(target_u_o) ? Page.CATEGORY : Page.OTHER;
+  const target_page = $69121eedef466fe9$export$775e6b3892b5ad52(target_u_o) ? Page.SEARCH : $69121eedef466fe9$export$30c8a12df09be0e4(target_u_o) ? Page.CATEGORY : Page.OTHER;
   window.next.router[isReplace ? "replace" : "push"](relativeUrl, undefined, {
     shallow: current_page === target_page && target_page !== Page.OTHER,
     scroll:
@@ -574,14 +553,41 @@ function $7ba951bfed42cf93$export$84601d922bd37be1(blocks, component_portals, se
     };
   });
 }
-const $7ad7a3d0011b7b1b$var$rendered_components_with_state_key = new Set();
-function $7ad7a3d0011b7b1b$export$a54ec244c8863715(props) {
-  return $b4d0d98857ed9934$export$f6e64e17bd69eeef({
-    solid_component: $b4d0d98857ed9934$export$e5139bbbb9a05035($7ad7a3d0011b7b1b$var$SolidSearchPage),
+function $1e18e5335ff79474$export$eb5844afe948564b(props) {
+  const default_is_set = $2IzJs$solidjs.createMemo(() => !!((0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).merchant[0]() && (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).market[0]() && (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).usedLocale[0]()?.backend_locale_));
+  const should_show = $2IzJs$solidjs.createMemo(prev => {
+    if (!prev && (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).provider_is_updating[0]())
+      // Why `!prev`? See https://gitlab.com/depict-ai/depict.ai/-/merge_requests/7854#note_1495776987
+      // If we weren't showing the component and the DepictProvider is currently updating, wait for it to have finished updating before showing the component
+      // Otherwise as soon as tenant and market is set we render the CategoryPage, but we might not have a DepictCategory yet, see https://depictaiworkspace.slack.com/archives/C04UZ2Z0RNE/p1690895918347289?thread_ts=1688391305.529449&cid=C04UZ2Z0RNE
+      return false;
+    return (props.isSet || default_is_set)();
+  });
+  return $2IzJs$solidjsweb.createComponent((0, $2IzJs$solidjs.Show), {
+    get when() {
+      return should_show();
+    },
+    get children() {
+      return props.children;
+    }
+  });
+}
+const $4e47e1e003da166e$var$rendered_components_with_state_key = new Set();
+function $4e47e1e003da166e$export$a54ec244c8863715(props) {
+  return $69121eedef466fe9$export$f6e64e17bd69eeef({
+    solid_component: (...args) => {
+      // Work around some kind of babel bug where an optimisation turns ...args into `arguments` in the ES10 build which becomes the wrong arguments when read from teh getter
+      const ourArguments = args;
+      return $2IzJs$solidjsweb.createComponent((0, $1e18e5335ff79474$export$eb5844afe948564b), {
+        get children() {
+          return $4e47e1e003da166e$var$SolidSearchPage(...ourArguments);
+        }
+      });
+    },
     props: props
   });
 }
-function $7ad7a3d0011b7b1b$var$SolidSearchPage(props, set_portals) {
+function $4e47e1e003da166e$var$SolidSearchPage(props, set_portals) {
   const depict_search = $2IzJs$solidjs.createMemo(() => {
     const instance = $2506fd72fd4393aa$export$f4d89133c6985668("search", props.stateKey, "SearchPage");
     $2IzJs$solidjs.onCleanup(() => {
@@ -604,7 +610,7 @@ function $7ad7a3d0011b7b1b$var$SolidSearchPage(props, set_portals) {
     // This is because on the front page the search_query updating is blocked because it's not the search page, and that means that `filtered_previous_searches` in Autocomplete.tsx doesn't filter out the current search query
     // Because it's so minor and would be quite hard to fix (one would need a second "actual search query" signal just for this purpose) it's wontfix for now
     // EDIT: now that we're resetting this in the onCleanup of the memo above this might no longer be the case
-    write_signal(!$b4d0d98857ed9934$export$775e6b3892b5ad52(location));
+    write_signal(!$69121eedef466fe9$export$775e6b3892b5ad52(location));
   };
   const [, set_search_page_in_dom] = (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).search_page_in_dom;
   const component_portals = new Set();
@@ -612,18 +618,18 @@ function $7ad7a3d0011b7b1b$var$SolidSearchPage(props, set_portals) {
   set_search_page_in_dom(true);
   $2IzJs$solidjs.onCleanup(() => set_search_page_in_dom(false));
   // react is really slow with disposing components, we want to avoid a flash of another search query when you click on a product and navigate away
-  $b4d0d98857ed9934$export$74f3924c5027fe1d(update_updating_blocked_signal); // if we navigate, re-check
+  $69121eedef466fe9$export$74f3924c5027fe1d(update_updating_blocked_signal); // if we navigate, re-check
   $2IzJs$solidjs.createComputed(() => {
     (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).search_page_path_[0](); // if react defined path changes, re-check
     update_updating_blocked_signal();
   });
-  $7ad7a3d0011b7b1b$var$search_page_path_checker();
+  $4e47e1e003da166e$var$search_page_path_checker();
   return $2IzJs$solidjs.createMemo(() => {
     const stateKey = $2IzJs$solidjs.untrack(() => props.stateKey);
-    if ($7ad7a3d0011b7b1b$var$rendered_components_with_state_key.has(stateKey)) throw new Error(`You have multiple SearchPage components with the same stateKey: ${stateKey}. Each SearchPage component must have a unique stateKey.`);
+    if ($4e47e1e003da166e$var$rendered_components_with_state_key.has(stateKey)) throw new Error(`You have multiple SearchPage components with the same stateKey: ${stateKey}. Each SearchPage component must have a unique stateKey.`);
     const transformed_content_blocks = $7ba951bfed42cf93$export$84601d922bd37be1(() => props.contentBlocksByRow, component_portals, set_portals);
-    $7ad7a3d0011b7b1b$var$rendered_components_with_state_key.add(stateKey);
-    $2IzJs$solidjs.onCleanup(() => $7ad7a3d0011b7b1b$var$rendered_components_with_state_key.delete(stateKey));
+    $4e47e1e003da166e$var$rendered_components_with_state_key.add(stateKey);
+    $2IzJs$solidjs.onCleanup(() => $4e47e1e003da166e$var$rendered_components_with_state_key.delete(stateKey));
     return $2IzJs$depictaiui.SearchPage({
       // Default config goes here
       get include_input_field() {
@@ -653,7 +659,7 @@ function $7ad7a3d0011b7b1b$var$SolidSearchPage(props, set_portals) {
 /**
  * Users often set the searchPagePath to something without the market which breaks everything using the searchPagePath internally, notably refining the search query. Add a warning for them.
  */
-function $7ad7a3d0011b7b1b$var$search_page_path_checker() {
+function $4e47e1e003da166e$var$search_page_path_checker() {
   let has_warned = false;
   $2IzJs$solidjs.createEffect(() => {
     if (has_warned) return;
@@ -669,17 +675,25 @@ function $7ad7a3d0011b7b1b$var$search_page_path_checker() {
     }
   });
 }
-const $5aa5fcb9f8a2bebc$var$rendered_components_with_state_key = new Set();
-function $5aa5fcb9f8a2bebc$export$f7d2f673fc2f091d(props) {
-  return $b4d0d98857ed9934$export$f6e64e17bd69eeef({
+const $03d75efbc2476217$var$rendered_components_with_state_key = new Set();
+function $03d75efbc2476217$export$f7d2f673fc2f091d(props) {
+  return $69121eedef466fe9$export$f6e64e17bd69eeef({
     // @ts-ignore
-    solid_component: (...args) => $b4d0d98857ed9934$export$e5139bbbb9a05035($5aa5fcb9f8a2bebc$var$SolidCategoryPage)(...args),
+    solid_component: (...args) => {
+      // Work around some kind of babel bug where an optimisation turns ...args into `arguments` in the ES10 build which becomes the wrong arguments when read from teh getter
+      const ourArguments = args;
+      return $2IzJs$solidjsweb.createComponent((0, $1e18e5335ff79474$export$eb5844afe948564b), {
+        get children() {
+          return $03d75efbc2476217$var$SolidCategoryPage(...ourArguments);
+        }
+      });
+    },
     props: props,
     wrapper_type: "div",
     wrapper_style: {}
   });
 }
-function $5aa5fcb9f8a2bebc$var$SolidCategoryPage(props, set_portals) {
+function $03d75efbc2476217$var$SolidCategoryPage(props, set_portals) {
   const depict_category = $2IzJs$solidjs.createMemo(() => $2506fd72fd4393aa$export$f4d89133c6985668("category", props.stateKey, "CategoryPage") // stateKey can change
   );
 
@@ -699,11 +713,11 @@ function $5aa5fcb9f8a2bebc$var$SolidCategoryPage(props, set_portals) {
       (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).known_category_paths.add(location.pathname);
     }
   });
-  const category = () => $2IzJs$solidjs.createMemo(() => {
+  const Category = () => $2IzJs$solidjs.createMemo(() => {
     const stateKey = $2IzJs$solidjs.untrack(() => props.stateKey);
-    if ($5aa5fcb9f8a2bebc$var$rendered_components_with_state_key.has(stateKey)) throw new Error(`You have multiple CategoryPage components with the same stateKey: ${stateKey}. Each CategoryPage component must have a unique stateKey.`);
-    $5aa5fcb9f8a2bebc$var$rendered_components_with_state_key.add(stateKey);
-    $2IzJs$solidjs.onCleanup(() => $5aa5fcb9f8a2bebc$var$rendered_components_with_state_key.delete(stateKey));
+    if ($03d75efbc2476217$var$rendered_components_with_state_key.has(stateKey)) throw new Error(`You have multiple CategoryPage components with the same stateKey: ${stateKey}. Each CategoryPage component must have a unique stateKey.`);
+    $03d75efbc2476217$var$rendered_components_with_state_key.add(stateKey);
+    $2IzJs$solidjs.onCleanup(() => $03d75efbc2476217$var$rendered_components_with_state_key.delete(stateKey));
     const transformed_content_blocks = $7ba951bfed42cf93$export$84601d922bd37be1(() => props.contentBlocksByRow, component_portals, set_portals);
     return $2IzJs$depictaiui.CategoryPage({
       depict_category: depict_category(),
@@ -738,15 +752,24 @@ function $5aa5fcb9f8a2bebc$var$SolidCategoryPage(props, set_portals) {
       })
     });
   });
-  return $b4d0d98857ed9934$export$e5139bbbb9a05035(category, category_state_set);
+  return $2IzJs$solidjsweb.createComponent((0, $1e18e5335ff79474$export$eb5844afe948564b), {
+    isSet: category_state_set,
+    get children() {
+      return $2IzJs$solidjsweb.createComponent(Category, {});
+    }
+  });
 }
 function $d88e98b11c182b8e$export$5646050d516e06bc(react_props) {
-  return $b4d0d98857ed9934$export$f6e64e17bd69eeef({
-    solid_component: $b4d0d98857ed9934$export$e5139bbbb9a05035($d88e98b11c182b8e$var$vanilla_breadcrumbs),
+  return $69121eedef466fe9$export$f6e64e17bd69eeef({
+    solid_component: solidProps => $2IzJs$solidjsweb.createComponent((0, $1e18e5335ff79474$export$eb5844afe948564b), {
+      get children() {
+        return $2IzJs$solidjsweb.createComponent($d88e98b11c182b8e$var$VanillaBreadcrumbs, solidProps);
+      }
+    }),
     props: react_props
   });
 }
-function $d88e98b11c182b8e$var$vanilla_breadcrumbs(props) {
+function $d88e98b11c182b8e$var$VanillaBreadcrumbs(props) {
   // memo so stateKey can be dynamically changed
   return $2IzJs$solidjs.createMemo(() => {
     const depict_category = $2506fd72fd4393aa$export$f4d89133c6985668("category", props.stateKey, "BreadCrumbs");
@@ -756,12 +779,16 @@ function $d88e98b11c182b8e$var$vanilla_breadcrumbs(props) {
   });
 }
 function $f16af0e861aff3d0$export$466cdc317043f6cb(react_props = {}) {
-  return $b4d0d98857ed9934$export$f6e64e17bd69eeef({
-    solid_component: $b4d0d98857ed9934$export$e5139bbbb9a05035($f16af0e861aff3d0$var$vanilla_quick_links),
+  return $69121eedef466fe9$export$f6e64e17bd69eeef({
+    solid_component: solidProps => $2IzJs$solidjsweb.createComponent((0, $1e18e5335ff79474$export$eb5844afe948564b), {
+      get children() {
+        return $2IzJs$solidjsweb.createComponent($f16af0e861aff3d0$var$VanillaQuickLinks, solidProps);
+      }
+    }),
     props: react_props
   });
 }
-function $f16af0e861aff3d0$var$vanilla_quick_links(props) {
+function $f16af0e861aff3d0$var$VanillaQuickLinks(props) {
   // memo so stateKey can be dynamically changed
   return $2IzJs$solidjs.createMemo(() => {
     const depict_category = $2506fd72fd4393aa$export$f4d89133c6985668("category", props.stateKey, "QuickLinks");
@@ -775,7 +802,7 @@ const $df522c8a81ed5a01$export$3f37af283f8fb843 = raw_react_props => {
     class: raw_react_props.className,
     ...raw_react_props
   };
-  return $b4d0d98857ed9934$export$f6e64e17bd69eeef({
+  return $69121eedef466fe9$export$f6e64e17bd69eeef({
     solid_component: props_store => $2IzJs$depictaiui.ImagePlaceholder(props_store),
     props: react_props,
     wrapper_type: "span",
@@ -787,7 +814,7 @@ const $7c8b440edc188ad5$export$89c6019e4baa40b1 = raw_react_props => {
     class: raw_react_props.className,
     ...raw_react_props
   };
-  return $b4d0d98857ed9934$export$f6e64e17bd69eeef({
+  return $69121eedef466fe9$export$f6e64e17bd69eeef({
     solid_component: props_store => $2IzJs$depictaiui.TextPlaceholder(props_store),
     props: react_props,
     wrapper_type: "span",
@@ -809,7 +836,7 @@ function $67657ea54664baa8$export$4daadad26e48a2c7(props) {
 }
 function $8ffd7da37fdd46be$export$82cfdc85a4d15688(props) {
   $67657ea54664baa8$export$4daadad26e48a2c7(props);
-  return $b4d0d98857ed9934$export$f6e64e17bd69eeef({
+  return $69121eedef466fe9$export$f6e64e17bd69eeef({
     solid_component: $8ffd7da37fdd46be$export$5abb40edfde2a843,
     props: props
   });
@@ -889,7 +916,7 @@ function $c6b960f2a07285c8$export$e46079a2793e9ec7(props, set_portals) {
 }
 function $48732d1a919ddb4c$export$b0a773486c1c2312(props) {
   $67657ea54664baa8$export$4daadad26e48a2c7(props);
-  return $b4d0d98857ed9934$export$f6e64e17bd69eeef({
+  return $69121eedef466fe9$export$f6e64e17bd69eeef({
     solid_component: (0, $c6b960f2a07285c8$export$e46079a2793e9ec7),
     props: props,
     hydrate_function_when_ssr: (0, $2IzJs$solidjsweb.hydrate),
@@ -936,25 +963,27 @@ function $ae73b15c325f1b21$export$912994940e660d32(params = {}) {
     open: open
   };
 }
-const $913da7f4d0bc77f2$export$9bb30bbe003b82e0 = (props = {}) => {
+const $c8b22e24c4b8035c$export$9bb30bbe003b82e0 = (props = {}) => {
   // We should just export a plain SearchField component here, not a weird hook thing, but I don't want to make a breaking change. Just fixing the re-rendering issue for now.
   // Create signal that persists across renders
   const [[get_aligner_signal_value, set_aligner_signal_value]] = $2IzJs$react.useState($2IzJs$solidjs.createSignal());
   // Update signal value when alignerRef changes
   set_aligner_signal_value(props?.alignerRef);
   // Make sure react never re-renders the actual SearchField component
-  const componentFunction = $2IzJs$react.useCallback(() => $b4d0d98857ed9934$export$f6e64e17bd69eeef({
-    solid_component: $b4d0d98857ed9934$export$e5139bbbb9a05035(() => {
-      return $2IzJs$solidjs.createMemo(() => {
-        const depict_search = $2506fd72fd4393aa$export$f4d89133c6985668("search", props.stateKey, "useSearchField");
-        return $2IzJs$depictaiui.SearchField({
-          depict_search: depict_search,
-          get aligner_ref() {
-            // React mutates the object at some random time so only get the current value once it actually is requested
-            return get_aligner_signal_value()?.current;
-          }
+  const componentFunction = $2IzJs$react.useCallback(() => $69121eedef466fe9$export$f6e64e17bd69eeef({
+    solid_component: () => $2IzJs$solidjsweb.createComponent((0, $1e18e5335ff79474$export$eb5844afe948564b), {
+      get children() {
+        return $2IzJs$solidjs.createMemo(() => {
+          const depict_search = $2506fd72fd4393aa$export$f4d89133c6985668("search", props.stateKey, "useSearchField");
+          return $2IzJs$depictaiui.SearchField({
+            depict_search: depict_search,
+            get aligner_ref() {
+              // React mutates the object at some random time so only get the current value once it actually is requested
+              return get_aligner_signal_value()?.current;
+            }
+          });
         });
-      });
+      }
     }),
     props: {}
   }), []);
@@ -994,6 +1023,80 @@ async function $a134ea100690b628$var$fetchRecommendations(opts) {
   });
   return fetchedRecs;
 }
+function $a2654d3e936d0024$export$72616730c1fad2f4(stateKey) {
+  // Create signal that will persist re-renders
+  const [[getStateKeySignalValue, setStateKeySignalValue]] = $2IzJs$react.useState($2IzJs$solidjs.createSignal(stateKey));
+  const [cachedFunctionCalls] = $2IzJs$react.useState({});
+  const [hookFunctionsObject, setHookFunctionsObject] = $2IzJs$react.useState(new Proxy({}, {
+    get(target, property) {
+      return (...args) => {
+        // Cache function calls until we have the real functions
+        cachedFunctionCalls[property] = args;
+      };
+    }
+  }));
+  $2IzJs$react.useEffect(() => {
+    // get_instance_and_track_component may first return something in useEffect because the next-js router first gives us stuff from the URL after hydration (effects have ran) and we only create the instances if merchant and market is set
+    return $2IzJs$solidjs.createRoot(dispose => {
+      let firstRun = true;
+      $2IzJs$solidjs.createRenderEffect(() => {
+        const depict_category = $2506fd72fd4393aa$export$f4d89133c6985668("category", getStateKeySignalValue(), "useCategoryFilterHelpers");
+        const functions = $a2654d3e936d0024$var$createHookFunctions(depict_category);
+        if (firstRun) {
+          firstRun = false;
+          // Run cached function calls
+          Object.entries(cachedFunctionCalls).forEach(([key, args]) => functions[key]?.(...args));
+        }
+        setHookFunctionsObject(functions);
+      });
+      return dispose;
+    });
+  }, []);
+  // When props change, update our signal value so solid can react to stateKey changing
+  $2IzJs$react.useEffect(() => {
+    setStateKeySignalValue(stateKey);
+  }, [stateKey]);
+  return hookFunctionsObject;
+}
+function $a2654d3e936d0024$var$createHookFunctions(depictCategory) {
+  const categorySetShouldShowFilters = newValue => {
+    const {
+      historyStateSignals_: {
+        filters_open: [, setFiltersOpen],
+        sorting_open: [, setSortingOpen]
+      }
+    } = depictCategory;
+    if (newValue)
+      // Close sorting so we don't show both at once
+      setSortingOpen(false);
+    setFiltersOpen(newValue);
+  };
+  const categorySetFilter = filter => {
+    const [selectedFilters, setSelectedFilters] = depictCategory.selectedFilters_;
+    const filteredFilters = $2IzJs$solidjs.untrack(selectedFilters).filter(({
+      field: field,
+      op: op
+    }) => field !== filter.field && op !== filter.op);
+    filteredFilters.push(filter);
+    setSelectedFilters(filteredFilters);
+  };
+  const categoryExpandFilterGroup = groupToExpand => {
+    const [expandedFilters, setExpandedFilters] = depictCategory.historyStateSignals_.expanded_filters;
+    const newExpanded = $2IzJs$solidjs.untrack(expandedFilters).filter(({
+      section_: section_
+    }) => section_ !== groupToExpand);
+    newExpanded.push({
+      section_: groupToExpand,
+      expanded_: true
+    });
+    setExpandedFilters(newExpanded);
+  };
+  return {
+    categorySetShouldShowFilters: categorySetShouldShowFilters,
+    categorySetFilter: categorySetFilter,
+    categoryExpandFilterGroup: categoryExpandFilterGroup
+  };
+}
 const $e387bd534de10acd$export$804fac5697cfbe35 = router => (relativeUrl, {
   scroll: scroll,
   replace: replace
@@ -1004,9 +1107,9 @@ const $e387bd534de10acd$export$804fac5697cfbe35 = router => (relativeUrl, {
     Page[Page["SEARCH"] = 1] = "SEARCH";
     Page[Page["CATEGORY"] = 2] = "CATEGORY";
   })(Page || (Page = {}));
-  const current_page = $b4d0d98857ed9934$export$775e6b3892b5ad52() ? Page.SEARCH : $b4d0d98857ed9934$export$30c8a12df09be0e4() ? Page.CATEGORY : Page.OTHER;
+  const current_page = $69121eedef466fe9$export$775e6b3892b5ad52() ? Page.SEARCH : $69121eedef466fe9$export$30c8a12df09be0e4() ? Page.CATEGORY : Page.OTHER;
   const target_u_o = new URL(relativeUrl, location.origin);
-  const target_page = $b4d0d98857ed9934$export$775e6b3892b5ad52(target_u_o) ? Page.SEARCH : $b4d0d98857ed9934$export$30c8a12df09be0e4(target_u_o) ? Page.CATEGORY : Page.OTHER;
+  const target_page = $69121eedef466fe9$export$775e6b3892b5ad52(target_u_o) ? Page.SEARCH : $69121eedef466fe9$export$30c8a12df09be0e4(target_u_o) ? Page.CATEGORY : Page.OTHER;
   router[replace ? "replace" : "push"](relativeUrl, undefined, {
     shallow: current_page === target_page && target_page !== Page.OTHER,
     scroll:

package/latest/index.d.ts

@@ -1,9 +1,9 @@
 import { DPC } from "@depict-ai/dpc/latest";
 import React, { PropsWithChildren, FC, ReactNode, ReactPortal, ReactElement } from "react";
-import { BaseCategoryProviderConfig, BaseProviderConfig, BaseSearchProviderConfig, ModernDisplayWithPageUrl, BaseProductListingConfig, BaseSearchPageConfig, BaseCategoryPageConfig, CategoryTitle, embedded_num_products, ListingQuery, ImagePlaceholder as _ImagePlaceholder1, TextPlaceholder as _TextPlaceholder1, ExclusiveId, fetchDepictRecommendations } from "@depict-ai/ui/latest";
+import { BaseCategoryProviderConfig, BaseProviderConfig, BaseSearchProviderConfig, ModernDisplayWithPageUrl, BaseProductListingConfig, BaseSearchPageConfig, BaseCategoryPageConfig, CategoryTitle, embedded_num_products, ListingQuery, ImagePlaceholder as _ImagePlaceholder1, TextPlaceholder as _TextPlaceholder1, ExclusiveId, fetchDepictRecommendations, FilterWithData } from "@depict-ai/ui/latest";
 import { Locale } from "@depict-ai/ui/locales/latest";
 import { Display, ModernDisplay } from "@depict-ai/utilishared/latest";
-export const version = "4.0.23";
+export const version = "4.1.1";
 interface UsePerformanceClientReturn {
   dpc: DPC;
 }
@@ -602,6 +602,15 @@ interface UseFetchRecommendationsReturn<T extends Display> {
  * @returns {UseFetchRecommendationsReturn}
  */
 export function useFetchRecommendations<T extends ModernDisplay>(): UseFetchRecommendationsReturn<T>;
+/**
+ * Gives you some helpers that let you interact with the state of a category page
+ * @param stateKey the stateKey of the components to effect, leave unset if you haven't set a stateKey on your components.
+ */
+export function useCategoryFilterHelpers(stateKey: string | undefined): {
+  categorySetShouldShowFilters: (shouldShow: boolean) => void;
+  categorySetFilter: (filter: FilterWithData) => void;
+  categoryExpandFilterGroup: (title: string) => void;
+};
 /**
  * Helper function to navigate to a new page depending on the navigation library used.
  */