@depict-ai/react-ui 4.0.22 → 4.1.0

package/ES10/index.cjs

@@ -33,6 +33,7 @@ $parcel$export(module.exports, "useSearchModal", () => $0991f250194bf9f3$export$
 $parcel$export(module.exports, "useSearchField", () => $fea6ed5be1bf2b27$export$9bb30bbe003b82e0);
 $parcel$export(module.exports, "useFetchRecommendations", () => $2ea1d71b29581906$export$6501da23a2770fc);
 $parcel$export(module.exports, "usePerformanceClient", () => $18f442be2cc59de2$export$38b98fae14bd1f64);
+$parcel$export(module.exports, "useCategoryFilterHelpers", () => $b8893da801486712$export$72616730c1fad2f4);
 $parcel$export(module.exports, "CategoryTitle", () => $151509d164ba25a9$re_export$CategoryTitle);
 $parcel$export(module.exports, "EmbeddedNumProducts", () => $151509d164ba25a9$re_export$EmbeddedNumProducts);
 $parcel$export(module.exports, "SearchModalV2", () => $151509d164ba25a9$re_export$SearchModalV2);
@@ -41,7 +42,7 @@ $parcel$export(module.exports, "version", () => $efbdd2dab4314170$export$83d89fb
 $parcel$export(module.exports, "Navigation", () => $0d3a2413fdeb34b9$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 $efbdd2dab4314170$export$83d89fbfd8236492 = "4.0.22";
+const $efbdd2dab4314170$export$83d89fbfd8236492 = "4.1.0";
 const $ef516b1f92253963$export$8e769ad4338a911e = {
   usedLocale: $2kiy7$solidjs.createSignal((0, $2kiy7$depictaiuilocales.defaultLocale)),
   search_instances: new Map(),
@@ -127,29 +128,37 @@ function $e7ba61a7074c02d3$export$f6e64e17bd69eeef(_ref) {
   }), ...portals);
 }
 function $e7ba61a7074c02d3$export$e5139bbbb9a05035(component, is_set) {
+  const unset = Symbol();
+  const [args, setArgs] = $2kiy7$solidjs.createSignal(unset);
+  const default_is_set = $2kiy7$solidjs.createMemo(() => {
+    var _globalState$usedLoca;
+    return !!((0, $ef516b1f92253963$export$8e769ad4338a911e).merchant[0]() && (0, $ef516b1f92253963$export$8e769ad4338a911e).market[0]() && (_globalState$usedLoca = (0, $ef516b1f92253963$export$8e769ad4338a911e).usedLocale[0]()) !== null && _globalState$usedLoca !== void 0 && _globalState$usedLoca.backend_locale_);
+  });
+  const should_show = $2kiy7$solidjs.createMemo(prev => {
+    if (!prev && (0, $ef516b1f92253963$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
+  const renderedShow = $2kiy7$solidjs.createComponent((0, $2kiy7$solidjs.Show), {
+    get when() {
+      // Need to wait with rendering component until we've actually received the args
+      return should_show() && args() !== unset;
+    },
+    get children() {
+      return component(...$2kiy7$solidjs.untrack(args));
+    }
+  });
+  // Previously we did above logic in the function that we return here, but we can't do that since in solid-js insertExpression it says `while (typeof v === "function") v = v();`, that means that if a component returns a function containing a signal value, that signal value changing would lead to the entire component re-rendering.
+  // Instead, we have to create our show logic and everything that actually needs an owner above and only return a signal getter that isn't created with the same owner as it's called
+  // Relevant debugging playground links: https://playground.solidjs.com/anonymous/9b9bdca1-1fe6-4865-a6e7-850026d07a74, https://playground.solidjs.com/anonymous/cfd5e6cd-6931-43dd-aa9e-c73c855010c6, https://playground.solidjs.com/anonymous/c8b019a6-0cda-4863-8345-f42e1616d714
   return function () {
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) args[_key] = arguments[_key];
-    const default_is_set = $2kiy7$solidjs.createMemo(() => {
-      var _globalState$usedLoca;
-      return !!((0, $ef516b1f92253963$export$8e769ad4338a911e).merchant[0]() && (0, $ef516b1f92253963$export$8e769ad4338a911e).market[0]() && (_globalState$usedLoca = (0, $ef516b1f92253963$export$8e769ad4338a911e).usedLocale[0]()) !== null && _globalState$usedLoca !== void 0 && _globalState$usedLoca.backend_locale_);
-    }); // Apparently Show re-renders kids otherwise even if the falsiness of the condition doesn't change
-    const should_show = $2kiy7$solidjs.createMemo(prev => {
-      if (!prev && (0, $ef516b1f92253963$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 $2kiy7$solidjs.createComponent((0, $2kiy7$solidjs.Show), {
-      get when() {
-        return should_show();
-      },
-      get children() {
-        return component(...args);
-      }
-    });
+    setArgs(args);
+    return renderedShow;
   };
 }
 let $abe6528d061993d2$var$set = false;
@@ -1045,6 +1054,91 @@ async function $2ea1d71b29581906$var$fetchRecommendations(opts) {
   });
   return fetchedRecs;
 }
+function $b8893da801486712$export$72616730c1fad2f4(stateKey) {
+  // Create signal that will persist re-renders
+  const [[getStateKeySignalValue, setStateKeySignalValue]] = $2kiy7$react.useState($2kiy7$solidjs.createSignal(stateKey));
+  const [cachedFunctionCalls] = $2kiy7$react.useState({});
+  const [hookFunctionsObject, setHookFunctionsObject] = $2kiy7$react.useState(new Proxy({}, {
+    get(target, property) {
+      return function () {
+        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) args[_key] = arguments[_key];
+        // Cache function calls until we have the real functions
+        cachedFunctionCalls[property] = args;
+      };
+    }
+  }));
+  $2kiy7$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 $2kiy7$solidjs.createRoot(dispose => {
+      let firstRun = true;
+      $2kiy7$solidjs.createRenderEffect(() => {
+        const depict_category = $fe70497a7dcbe63d$export$f4d89133c6985668("category", getStateKeySignalValue(), "useCategoryFilterHelpers");
+        const functions = $b8893da801486712$var$createHookFunctions(depict_category);
+        if (firstRun) {
+          firstRun = false;
+          // Run cached function calls
+          Object.entries(cachedFunctionCalls).forEach(_ref => {
+            var _functions$key;
+            let [key, args] = _ref;
+            return (_functions$key = functions[key]) === null || _functions$key === void 0 ? void 0 : _functions$key.call(functions, ...args);
+          });
+        }
+        setHookFunctionsObject(functions);
+      });
+      return dispose;
+    });
+  }, []);
+  // When props change, update our signal value so solid can react to stateKey changing
+  $2kiy7$react.useEffect(() => {
+    setStateKeySignalValue(stateKey);
+  }, [stateKey]);
+  return hookFunctionsObject;
+}
+function $b8893da801486712$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 = $2kiy7$solidjs.untrack(selectedFilters).filter(_ref2 => {
+      let {
+        field: field,
+        op: op
+      } = _ref2;
+      return field !== filter.field && op !== filter.op;
+    });
+    filteredFilters.push(filter);
+    setSelectedFilters(filteredFilters);
+  };
+  const categoryExpandFilterGroup = groupToExpand => {
+    const [expandedFilters, setExpandedFilters] = depictCategory.historyStateSignals_.expanded_filters;
+    const newExpanded = $2kiy7$solidjs.untrack(expandedFilters).filter(_ref3 => {
+      let {
+        section_: section_
+      } = _ref3;
+      return section_ !== groupToExpand;
+    });
+    newExpanded.push({
+      section_: groupToExpand,
+      expanded_: true
+    });
+    setExpandedFilters(newExpanded);
+  };
+  return {
+    categorySetShouldShowFilters: categorySetShouldShowFilters,
+    categorySetFilter: categorySetFilter,
+    categoryExpandFilterGroup: categoryExpandFilterGroup
+  };
+}
 const $6bf91538dbdf0252$export$804fac5697cfbe35 = router => (relativeUrl, _ref) => {
   let {
     scroll: scroll,

package/ES10/index.d.ts

@@ -1,9 +1,9 @@
 import { DPC } from "@depict-ai/dpc/ES10";
 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/ES10";
+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/ES10";
 import { Locale } from "@depict-ai/ui/locales/ES10";
 import { Display, ModernDisplay } from "@depict-ai/utilishared/ES10";
-export const version = "4.0.22";
+export const version = "4.1.0";
 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.
  */

package/ES10/index.js

@@ -1,7 +1,7 @@
 "use client";
 import { add_to_version_info as $jb2Oo$add_to_version_info, catchify as $jb2Oo$catchify, queueMacroTask as $jb2Oo$queueMacroTask, instant_exec_on_suspect_history_change as $jb2Oo$instant_exec_on_suspect_history_change, derror as $jb2Oo$derror, dwarn as $jb2Oo$dwarn } from "@depict-ai/utilishared/ES10";
 import { CategoryTitle as $383b6fd56bf151bd$re_export$CategoryTitle, embedded_num_products as $383b6fd56bf151bd$re_export$EmbeddedNumProducts, SearchModalV2 as $383b6fd56bf151bd$re_export$SearchModalV2, ClassicSearchModal as $383b6fd56bf151bd$re_export$ClassicSearchModal, DepictAPI as $jb2Oo$DepictAPI, DepictSearch as $jb2Oo$DepictSearch, DepictCategory as $jb2Oo$DepictCategory, get_search_query_updating_blocked_signal as $jb2Oo$get_search_query_updating_blocked_signal, SearchPage as $jb2Oo$SearchPage, defaultColsAtSize as $jb2Oo$defaultColsAtSize, defaultGridSpacing as $jb2Oo$defaultGridSpacing, ProductCardError as $jb2Oo$ProductCardError, CategoryPage as $jb2Oo$CategoryPage, defaultCategoryTitlePlugin as $jb2Oo$defaultCategoryTitlePlugin, BreadCrumbs as $jb2Oo$BreadCrumbs, QuickLinks as $jb2Oo$QuickLinks, ImagePlaceholder as $jb2Oo$ImagePlaceholder, TextPlaceholder as $jb2Oo$TextPlaceholder, RecommendationSlider as $jb2Oo$RecommendationSlider, RecommendationGrid as $jb2Oo$RecommendationGrid, modalVersionSymbol as $jb2Oo$modalVersionSymbol, open_modal_with_alignment as $jb2Oo$open_modal_with_alignment, SearchField as $jb2Oo$SearchField, fetchDepictRecommendations as $jb2Oo$fetchDepictRecommendations } from "@depict-ai/ui/ES10";
-import { untrack as $jb2Oo$untrack, createRoot as $jb2Oo$createRoot, createEffect as $jb2Oo$createEffect, createMemo as $jb2Oo$createMemo, createComponent as $jb2Oo$createComponent, Show as $jb2Oo$Show, createSignal as $jb2Oo$createSignal, createComputed as $jb2Oo$createComputed, onCleanup as $jb2Oo$onCleanup, getOwner as $jb2Oo$getOwner, runWithOwner as $jb2Oo$runWithOwner, on as $jb2Oo$on, mapArray as $jb2Oo$mapArray } from "solid-js";
+import { untrack as $jb2Oo$untrack, createRoot as $jb2Oo$createRoot, createEffect as $jb2Oo$createEffect, createSignal as $jb2Oo$createSignal, createMemo as $jb2Oo$createMemo, createComponent as $jb2Oo$createComponent, Show as $jb2Oo$Show, createComputed as $jb2Oo$createComputed, onCleanup as $jb2Oo$onCleanup, getOwner as $jb2Oo$getOwner, runWithOwner as $jb2Oo$runWithOwner, on as $jb2Oo$on, mapArray as $jb2Oo$mapArray, createRenderEffect as $jb2Oo$createRenderEffect } from "solid-js";
 import { createElement as $jb2Oo$createElement, Fragment as $jb2Oo$Fragment, useEffect as $jb2Oo$useEffect, useState as $jb2Oo$useState, useRef as $jb2Oo$useRef, forwardRef as $jb2Oo$forwardRef, Component as $jb2Oo$Component, useCallback as $jb2Oo$useCallback } from "react";
 import { defaultLocale as $jb2Oo$defaultLocale } from "@depict-ai/ui/locales/ES10";
 import { render as $jb2Oo$render, hydrate as $jb2Oo$hydrate, isServer as $jb2Oo$isServer, ssr as $jb2Oo$ssr, ssrHydrationKey as $jb2Oo$ssrHydrationKey } from "solid-js/web";
@@ -15,7 +15,7 @@ import { renderToString as $jb2Oo$renderToString } from "react-dom/server";
 // Note, if you add an export here, also add one in src-server/main.ts
 import { register_es_version } from "../multi_import_deduplicator.mjs";
 register_es_version("react-ui", "ES10");
-const $9bd9bb8700ab2ada$export$83d89fbfd8236492 = "4.0.22";
+const $9bd9bb8700ab2ada$export$83d89fbfd8236492 = "4.1.0";
 const $8c691d7f86317052$export$8e769ad4338a911e = {
   usedLocale: $jb2Oo$createSignal((0, $jb2Oo$defaultLocale)),
   search_instances: new Map(),
@@ -101,29 +101,37 @@ function $0dd9d9a9c7da4c1d$export$f6e64e17bd69eeef(_ref) {
   }), ...portals);
 }
 function $0dd9d9a9c7da4c1d$export$e5139bbbb9a05035(component, is_set) {
+  const unset = Symbol();
+  const [args, setArgs] = $jb2Oo$createSignal(unset);
+  const default_is_set = $jb2Oo$createMemo(() => {
+    var _globalState$usedLoca;
+    return !!((0, $8c691d7f86317052$export$8e769ad4338a911e).merchant[0]() && (0, $8c691d7f86317052$export$8e769ad4338a911e).market[0]() && (_globalState$usedLoca = (0, $8c691d7f86317052$export$8e769ad4338a911e).usedLocale[0]()) !== null && _globalState$usedLoca !== void 0 && _globalState$usedLoca.backend_locale_);
+  });
+  const should_show = $jb2Oo$createMemo(prev => {
+    if (!prev && (0, $8c691d7f86317052$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
+  const renderedShow = $jb2Oo$createComponent((0, $jb2Oo$Show), {
+    get when() {
+      // Need to wait with rendering component until we've actually received the args
+      return should_show() && args() !== unset;
+    },
+    get children() {
+      return component(...$jb2Oo$untrack(args));
+    }
+  });
+  // Previously we did above logic in the function that we return here, but we can't do that since in solid-js insertExpression it says `while (typeof v === "function") v = v();`, that means that if a component returns a function containing a signal value, that signal value changing would lead to the entire component re-rendering.
+  // Instead, we have to create our show logic and everything that actually needs an owner above and only return a signal getter that isn't created with the same owner as it's called
+  // Relevant debugging playground links: https://playground.solidjs.com/anonymous/9b9bdca1-1fe6-4865-a6e7-850026d07a74, https://playground.solidjs.com/anonymous/cfd5e6cd-6931-43dd-aa9e-c73c855010c6, https://playground.solidjs.com/anonymous/c8b019a6-0cda-4863-8345-f42e1616d714
   return function () {
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) args[_key] = arguments[_key];
-    const default_is_set = $jb2Oo$createMemo(() => {
-      var _globalState$usedLoca;
-      return !!((0, $8c691d7f86317052$export$8e769ad4338a911e).merchant[0]() && (0, $8c691d7f86317052$export$8e769ad4338a911e).market[0]() && (_globalState$usedLoca = (0, $8c691d7f86317052$export$8e769ad4338a911e).usedLocale[0]()) !== null && _globalState$usedLoca !== void 0 && _globalState$usedLoca.backend_locale_);
-    }); // Apparently Show re-renders kids otherwise even if the falsiness of the condition doesn't change
-    const should_show = $jb2Oo$createMemo(prev => {
-      if (!prev && (0, $8c691d7f86317052$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 $jb2Oo$createComponent((0, $jb2Oo$Show), {
-      get when() {
-        return should_show();
-      },
-      get children() {
-        return component(...args);
-      }
-    });
+    setArgs(args);
+    return renderedShow;
   };
 }
 let $64144f6d578fd8ac$var$set = false;
@@ -1019,6 +1027,91 @@ async function $1895644749ca8d8a$var$fetchRecommendations(opts) {
   });
   return fetchedRecs;
 }
+function $39af3ccd78996343$export$72616730c1fad2f4(stateKey) {
+  // Create signal that will persist re-renders
+  const [[getStateKeySignalValue, setStateKeySignalValue]] = $jb2Oo$useState($jb2Oo$createSignal(stateKey));
+  const [cachedFunctionCalls] = $jb2Oo$useState({});
+  const [hookFunctionsObject, setHookFunctionsObject] = $jb2Oo$useState(new Proxy({}, {
+    get(target, property) {
+      return function () {
+        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) args[_key] = arguments[_key];
+        // Cache function calls until we have the real functions
+        cachedFunctionCalls[property] = args;
+      };
+    }
+  }));
+  $jb2Oo$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 $jb2Oo$createRoot(dispose => {
+      let firstRun = true;
+      $jb2Oo$createRenderEffect(() => {
+        const depict_category = $fda7a7820477f957$export$f4d89133c6985668("category", getStateKeySignalValue(), "useCategoryFilterHelpers");
+        const functions = $39af3ccd78996343$var$createHookFunctions(depict_category);
+        if (firstRun) {
+          firstRun = false;
+          // Run cached function calls
+          Object.entries(cachedFunctionCalls).forEach(_ref => {
+            var _functions$key;
+            let [key, args] = _ref;
+            return (_functions$key = functions[key]) === null || _functions$key === void 0 ? void 0 : _functions$key.call(functions, ...args);
+          });
+        }
+        setHookFunctionsObject(functions);
+      });
+      return dispose;
+    });
+  }, []);
+  // When props change, update our signal value so solid can react to stateKey changing
+  $jb2Oo$useEffect(() => {
+    setStateKeySignalValue(stateKey);
+  }, [stateKey]);
+  return hookFunctionsObject;
+}
+function $39af3ccd78996343$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 = $jb2Oo$untrack(selectedFilters).filter(_ref2 => {
+      let {
+        field: field,
+        op: op
+      } = _ref2;
+      return field !== filter.field && op !== filter.op;
+    });
+    filteredFilters.push(filter);
+    setSelectedFilters(filteredFilters);
+  };
+  const categoryExpandFilterGroup = groupToExpand => {
+    const [expandedFilters, setExpandedFilters] = depictCategory.historyStateSignals_.expanded_filters;
+    const newExpanded = $jb2Oo$untrack(expandedFilters).filter(_ref3 => {
+      let {
+        section_: section_
+      } = _ref3;
+      return section_ !== groupToExpand;
+    });
+    newExpanded.push({
+      section_: groupToExpand,
+      expanded_: true
+    });
+    setExpandedFilters(newExpanded);
+  };
+  return {
+    categorySetShouldShowFilters: categorySetShouldShowFilters,
+    categorySetFilter: categorySetFilter,
+    categoryExpandFilterGroup: categoryExpandFilterGroup
+  };
+}
 const $05726fa9c7eda0a1$export$804fac5697cfbe35 = router => (relativeUrl, _ref) => {
   let {
     scroll: scroll,
@@ -1044,4 +1137,4 @@ const $a7dfdd84298ae791$export$b8a61e5c71402559 = {
   nextRouterNavigation: $05726fa9c7eda0a1$export$804fac5697cfbe35
 };
 $jb2Oo$add_to_version_info("react-ui", (0, $9bd9bb8700ab2ada$export$83d89fbfd8236492));
-export { $c61814cfb91ead09$export$466cdc317043f6cb as QuickLinks, $ec632214ac078e79$export$5646050d516e06bc as BreadCrumbs, $f6a205a95e4fdee3$export$80e99ee6b29cadd2 as ComponentAligner, $18e5b9f66c7ade8e$export$9fac37a9c21c2f3b as DepictProvider, $e86a296a07b17ad5$export$f7d2f673fc2f091d as CategoryPage, $d059770e7af9e2dc$export$a54ec244c8863715 as SearchPage, $6406849926c3f794$export$3f37af283f8fb843 as ImagePlaceholder, $2c7738b65cbcac1c$export$89c6019e4baa40b1 as TextPlaceholder, $31abef71c0a2d3fc$export$b0a773486c1c2312 as RecommendationGrid, $c02e9fd51f31a1bd$export$82cfdc85a4d15688 as RecommendationSlider, $356d18d3ed66814e$export$912994940e660d32 as useSearchModal, $4c71282d292aac6d$export$9bb30bbe003b82e0 as useSearchField, $1895644749ca8d8a$export$6501da23a2770fc as useFetchRecommendations, $b34796f5ebe3470e$export$38b98fae14bd1f64 as usePerformanceClient, $383b6fd56bf151bd$re_export$CategoryTitle as CategoryTitle, $383b6fd56bf151bd$re_export$EmbeddedNumProducts as EmbeddedNumProducts, $383b6fd56bf151bd$re_export$SearchModalV2 as SearchModalV2, $383b6fd56bf151bd$re_export$ClassicSearchModal as ClassicSearchModal, $9bd9bb8700ab2ada$export$83d89fbfd8236492 as version, $a7dfdd84298ae791$export$b8a61e5c71402559 as Navigation };
+export { $c61814cfb91ead09$export$466cdc317043f6cb as QuickLinks, $ec632214ac078e79$export$5646050d516e06bc as BreadCrumbs, $f6a205a95e4fdee3$export$80e99ee6b29cadd2 as ComponentAligner, $18e5b9f66c7ade8e$export$9fac37a9c21c2f3b as DepictProvider, $e86a296a07b17ad5$export$f7d2f673fc2f091d as CategoryPage, $d059770e7af9e2dc$export$a54ec244c8863715 as SearchPage, $6406849926c3f794$export$3f37af283f8fb843 as ImagePlaceholder, $2c7738b65cbcac1c$export$89c6019e4baa40b1 as TextPlaceholder, $31abef71c0a2d3fc$export$b0a773486c1c2312 as RecommendationGrid, $c02e9fd51f31a1bd$export$82cfdc85a4d15688 as RecommendationSlider, $356d18d3ed66814e$export$912994940e660d32 as useSearchModal, $4c71282d292aac6d$export$9bb30bbe003b82e0 as useSearchField, $1895644749ca8d8a$export$6501da23a2770fc as useFetchRecommendations, $b34796f5ebe3470e$export$38b98fae14bd1f64 as usePerformanceClient, $39af3ccd78996343$export$72616730c1fad2f4 as useCategoryFilterHelpers, $383b6fd56bf151bd$re_export$CategoryTitle as CategoryTitle, $383b6fd56bf151bd$re_export$EmbeddedNumProducts as EmbeddedNumProducts, $383b6fd56bf151bd$re_export$SearchModalV2 as SearchModalV2, $383b6fd56bf151bd$re_export$ClassicSearchModal as ClassicSearchModal, $9bd9bb8700ab2ada$export$83d89fbfd8236492 as version, $a7dfdd84298ae791$export$b8a61e5c71402559 as Navigation };

package/latest/index.cjs

@@ -33,6 +33,7 @@ $parcel$export(module.exports, "useSearchModal", () => $ae73b15c325f1b21$export$
 $parcel$export(module.exports, "useSearchField", () => $913da7f4d0bc77f2$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.22";
+const $db7b67857900028b$export$83d89fbfd8236492 = "4.1.0";
 const $0b7cd4fb39fc3502$export$8e769ad4338a911e = {
   usedLocale: $2IzJs$solidjs.createSignal((0, $2IzJs$depictaiuilocales.defaultLocale)),
   search_instances: new Map(),
@@ -119,25 +120,33 @@ function $b4d0d98857ed9934$export$f6e64e17bd69eeef({
   }), ...portals);
 }
 function $b4d0d98857ed9934$export$e5139bbbb9a05035(component, is_set) {
+  const unset = Symbol();
+  const [args, setArgs] = $2IzJs$solidjs.createSignal(unset);
+  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 (is_set || default_is_set)();
+  });
+  // @ts-ignore
+  const renderedShow = $2IzJs$solidjs.createComponent((0, $2IzJs$solidjs.Show), {
+    get when() {
+      // Need to wait with rendering component until we've actually received the args
+      return should_show() && args() !== unset;
+    },
+    get children() {
+      return component(...$2IzJs$solidjs.untrack(args));
+    }
+  });
+  // Previously we did above logic in the function that we return here, but we can't do that since in solid-js insertExpression it says `while (typeof v === "function") v = v();`, that means that if a component returns a function containing a signal value, that signal value changing would lead to the entire component re-rendering.
+  // Instead, we have to create our show logic and everything that actually needs an owner above and only return a signal getter that isn't created with the same owner as it's called
+  // Relevant debugging playground links: https://playground.solidjs.com/anonymous/9b9bdca1-1fe6-4865-a6e7-850026d07a74, https://playground.solidjs.com/anonymous/cfd5e6cd-6931-43dd-aa9e-c73c855010c6, https://playground.solidjs.com/anonymous/c8b019a6-0cda-4863-8345-f42e1616d714
   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);
-      }
-    });
+    setArgs(args);
+    return renderedShow;
   };
 }
 let $6319748b4f0426f0$var$set = false;
@@ -994,6 +1003,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

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.22";
+export const version = "4.1.0";
 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.
  */

package/latest/index.js

@@ -1,7 +1,7 @@
 "use client";
 import { add_to_version_info as $2GFvs$add_to_version_info, catchify as $2GFvs$catchify, queueMacroTask as $2GFvs$queueMacroTask, instant_exec_on_suspect_history_change as $2GFvs$instant_exec_on_suspect_history_change, derror as $2GFvs$derror, dwarn as $2GFvs$dwarn } from "@depict-ai/utilishared/latest";
 import { CategoryTitle as $43099132aad1ceb6$re_export$CategoryTitle, embedded_num_products as $43099132aad1ceb6$re_export$EmbeddedNumProducts, SearchModalV2 as $43099132aad1ceb6$re_export$SearchModalV2, ClassicSearchModal as $43099132aad1ceb6$re_export$ClassicSearchModal, DepictAPI as $2GFvs$DepictAPI, DepictSearch as $2GFvs$DepictSearch, DepictCategory as $2GFvs$DepictCategory, get_search_query_updating_blocked_signal as $2GFvs$get_search_query_updating_blocked_signal, SearchPage as $2GFvs$SearchPage, defaultColsAtSize as $2GFvs$defaultColsAtSize, defaultGridSpacing as $2GFvs$defaultGridSpacing, ProductCardError as $2GFvs$ProductCardError, CategoryPage as $2GFvs$CategoryPage, defaultCategoryTitlePlugin as $2GFvs$defaultCategoryTitlePlugin, BreadCrumbs as $2GFvs$BreadCrumbs, QuickLinks as $2GFvs$QuickLinks, ImagePlaceholder as $2GFvs$ImagePlaceholder, TextPlaceholder as $2GFvs$TextPlaceholder, RecommendationSlider as $2GFvs$RecommendationSlider, RecommendationGrid as $2GFvs$RecommendationGrid, modalVersionSymbol as $2GFvs$modalVersionSymbol, open_modal_with_alignment as $2GFvs$open_modal_with_alignment, SearchField as $2GFvs$SearchField, fetchDepictRecommendations as $2GFvs$fetchDepictRecommendations } from "@depict-ai/ui/latest";
-import { untrack as $2GFvs$untrack, createRoot as $2GFvs$createRoot, createEffect as $2GFvs$createEffect, createMemo as $2GFvs$createMemo, createComponent as $2GFvs$createComponent, Show as $2GFvs$Show, createSignal as $2GFvs$createSignal, createComputed as $2GFvs$createComputed, onCleanup as $2GFvs$onCleanup, getOwner as $2GFvs$getOwner, runWithOwner as $2GFvs$runWithOwner, on as $2GFvs$on, mapArray as $2GFvs$mapArray } from "solid-js";
+import { untrack as $2GFvs$untrack, createRoot as $2GFvs$createRoot, createEffect as $2GFvs$createEffect, createSignal as $2GFvs$createSignal, createMemo as $2GFvs$createMemo, createComponent as $2GFvs$createComponent, Show as $2GFvs$Show, createComputed as $2GFvs$createComputed, onCleanup as $2GFvs$onCleanup, getOwner as $2GFvs$getOwner, runWithOwner as $2GFvs$runWithOwner, on as $2GFvs$on, mapArray as $2GFvs$mapArray, createRenderEffect as $2GFvs$createRenderEffect } from "solid-js";
 import { createElement as $2GFvs$createElement, Fragment as $2GFvs$Fragment, useEffect as $2GFvs$useEffect, useState as $2GFvs$useState, useRef as $2GFvs$useRef, forwardRef as $2GFvs$forwardRef, Component as $2GFvs$Component, useCallback as $2GFvs$useCallback } from "react";
 import { defaultLocale as $2GFvs$defaultLocale } from "@depict-ai/ui/locales/latest";
 import { render as $2GFvs$render, hydrate as $2GFvs$hydrate, isServer as $2GFvs$isServer, ssr as $2GFvs$ssr, ssrHydrationKey as $2GFvs$ssrHydrationKey } from "solid-js/web";
@@ -15,7 +15,7 @@ import { renderToString as $2GFvs$renderToString } from "react-dom/server";
 // Note, if you add an export here, also add one in src-server/main.ts
 import { register_es_version } from "../multi_import_deduplicator.mjs";
 register_es_version("react-ui", "latest");
-const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "4.0.22";
+const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "4.1.0";
 const $42858f023ef23dab$export$8e769ad4338a911e = {
   usedLocale: $2GFvs$createSignal((0, $2GFvs$defaultLocale)),
   search_instances: new Map(),
@@ -93,25 +93,33 @@ function $c83ba9ab79386687$export$f6e64e17bd69eeef({
   }), ...portals);
 }
 function $c83ba9ab79386687$export$e5139bbbb9a05035(component, is_set) {
+  const unset = Symbol();
+  const [args, setArgs] = $2GFvs$createSignal(unset);
+  const default_is_set = $2GFvs$createMemo(() => !!((0, $42858f023ef23dab$export$8e769ad4338a911e).merchant[0]() && (0, $42858f023ef23dab$export$8e769ad4338a911e).market[0]() && (0, $42858f023ef23dab$export$8e769ad4338a911e).usedLocale[0]()?.backend_locale_));
+  const should_show = $2GFvs$createMemo(prev => {
+    if (!prev && (0, $42858f023ef23dab$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
+  const renderedShow = $2GFvs$createComponent((0, $2GFvs$Show), {
+    get when() {
+      // Need to wait with rendering component until we've actually received the args
+      return should_show() && args() !== unset;
+    },
+    get children() {
+      return component(...$2GFvs$untrack(args));
+    }
+  });
+  // Previously we did above logic in the function that we return here, but we can't do that since in solid-js insertExpression it says `while (typeof v === "function") v = v();`, that means that if a component returns a function containing a signal value, that signal value changing would lead to the entire component re-rendering.
+  // Instead, we have to create our show logic and everything that actually needs an owner above and only return a signal getter that isn't created with the same owner as it's called
+  // Relevant debugging playground links: https://playground.solidjs.com/anonymous/9b9bdca1-1fe6-4865-a6e7-850026d07a74, https://playground.solidjs.com/anonymous/cfd5e6cd-6931-43dd-aa9e-c73c855010c6, https://playground.solidjs.com/anonymous/c8b019a6-0cda-4863-8345-f42e1616d714
   return (...args) => {
-    const default_is_set = $2GFvs$createMemo(() => !!((0, $42858f023ef23dab$export$8e769ad4338a911e).merchant[0]() && (0, $42858f023ef23dab$export$8e769ad4338a911e).market[0]() && (0, $42858f023ef23dab$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 = $2GFvs$createMemo(prev => {
-      if (!prev && (0, $42858f023ef23dab$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 $2GFvs$createComponent((0, $2GFvs$Show), {
-      get when() {
-        return should_show();
-      },
-      get children() {
-        return component(...args);
-      }
-    });
+    setArgs(args);
+    return renderedShow;
   };
 }
 let $8071251ee4e9ffa1$var$set = false;
@@ -968,6 +976,80 @@ async function $1bb4271dc44722e2$var$fetchRecommendations(opts) {
   });
   return fetchedRecs;
 }
+function $4d60f63392752531$export$72616730c1fad2f4(stateKey) {
+  // Create signal that will persist re-renders
+  const [[getStateKeySignalValue, setStateKeySignalValue]] = $2GFvs$useState($2GFvs$createSignal(stateKey));
+  const [cachedFunctionCalls] = $2GFvs$useState({});
+  const [hookFunctionsObject, setHookFunctionsObject] = $2GFvs$useState(new Proxy({}, {
+    get(target, property) {
+      return (...args) => {
+        // Cache function calls until we have the real functions
+        cachedFunctionCalls[property] = args;
+      };
+    }
+  }));
+  $2GFvs$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 $2GFvs$createRoot(dispose => {
+      let firstRun = true;
+      $2GFvs$createRenderEffect(() => {
+        const depict_category = $99489374cd4f601d$export$f4d89133c6985668("category", getStateKeySignalValue(), "useCategoryFilterHelpers");
+        const functions = $4d60f63392752531$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
+  $2GFvs$useEffect(() => {
+    setStateKeySignalValue(stateKey);
+  }, [stateKey]);
+  return hookFunctionsObject;
+}
+function $4d60f63392752531$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 = $2GFvs$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 = $2GFvs$untrack(expandedFilters).filter(({
+      section_: section_
+    }) => section_ !== groupToExpand);
+    newExpanded.push({
+      section_: groupToExpand,
+      expanded_: true
+    });
+    setExpandedFilters(newExpanded);
+  };
+  return {
+    categorySetShouldShowFilters: categorySetShouldShowFilters,
+    categorySetFilter: categorySetFilter,
+    categoryExpandFilterGroup: categoryExpandFilterGroup
+  };
+}
 const $a92aa2beb560b8af$export$804fac5697cfbe35 = router => (relativeUrl, {
   scroll: scroll,
   replace: replace
@@ -992,4 +1074,4 @@ const $97603d19204ec48d$export$b8a61e5c71402559 = {
   nextRouterNavigation: $a92aa2beb560b8af$export$804fac5697cfbe35
 };
 $2GFvs$add_to_version_info("react-ui", (0, $c9c4d066f9a5b51b$export$83d89fbfd8236492));
-export { $b68a14248b7ef667$export$466cdc317043f6cb as QuickLinks, $f866f7ed9f751af4$export$5646050d516e06bc as BreadCrumbs, $421f32789b6f111f$export$80e99ee6b29cadd2 as ComponentAligner, $5376eb2a386cd90d$export$9fac37a9c21c2f3b as DepictProvider, $48d7f568740a317d$export$f7d2f673fc2f091d as CategoryPage, $4a678f0c87b12e78$export$a54ec244c8863715 as SearchPage, $f446a84f85ba06f6$export$3f37af283f8fb843 as ImagePlaceholder, $cbd250061abf11cb$export$89c6019e4baa40b1 as TextPlaceholder, $73b783bfc241b2d9$export$b0a773486c1c2312 as RecommendationGrid, $4fd5dc0e231a60d9$export$82cfdc85a4d15688 as RecommendationSlider, $70344e5e0d0fea06$export$912994940e660d32 as useSearchModal, $2b886cf548a4775c$export$9bb30bbe003b82e0 as useSearchField, $1bb4271dc44722e2$export$6501da23a2770fc as useFetchRecommendations, $a00d8f27abd5d0b0$export$38b98fae14bd1f64 as usePerformanceClient, $43099132aad1ceb6$re_export$CategoryTitle as CategoryTitle, $43099132aad1ceb6$re_export$EmbeddedNumProducts as EmbeddedNumProducts, $43099132aad1ceb6$re_export$SearchModalV2 as SearchModalV2, $43099132aad1ceb6$re_export$ClassicSearchModal as ClassicSearchModal, $c9c4d066f9a5b51b$export$83d89fbfd8236492 as version, $97603d19204ec48d$export$b8a61e5c71402559 as Navigation };
+export { $b68a14248b7ef667$export$466cdc317043f6cb as QuickLinks, $f866f7ed9f751af4$export$5646050d516e06bc as BreadCrumbs, $421f32789b6f111f$export$80e99ee6b29cadd2 as ComponentAligner, $5376eb2a386cd90d$export$9fac37a9c21c2f3b as DepictProvider, $48d7f568740a317d$export$f7d2f673fc2f091d as CategoryPage, $4a678f0c87b12e78$export$a54ec244c8863715 as SearchPage, $f446a84f85ba06f6$export$3f37af283f8fb843 as ImagePlaceholder, $cbd250061abf11cb$export$89c6019e4baa40b1 as TextPlaceholder, $73b783bfc241b2d9$export$b0a773486c1c2312 as RecommendationGrid, $4fd5dc0e231a60d9$export$82cfdc85a4d15688 as RecommendationSlider, $70344e5e0d0fea06$export$912994940e660d32 as useSearchModal, $2b886cf548a4775c$export$9bb30bbe003b82e0 as useSearchField, $1bb4271dc44722e2$export$6501da23a2770fc as useFetchRecommendations, $a00d8f27abd5d0b0$export$38b98fae14bd1f64 as usePerformanceClient, $4d60f63392752531$export$72616730c1fad2f4 as useCategoryFilterHelpers, $43099132aad1ceb6$re_export$CategoryTitle as CategoryTitle, $43099132aad1ceb6$re_export$EmbeddedNumProducts as EmbeddedNumProducts, $43099132aad1ceb6$re_export$SearchModalV2 as SearchModalV2, $43099132aad1ceb6$re_export$ClassicSearchModal as ClassicSearchModal, $c9c4d066f9a5b51b$export$83d89fbfd8236492 as version, $97603d19204ec48d$export$b8a61e5c71402559 as Navigation };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depict-ai/react-ui",
-  "version": "4.0.22",
+  "version": "4.1.0",
   "packageManager": "yarn@3.2.2",
   "source": "src/index.ts",
   "types": "ES10/index.d.ts",
@@ -137,7 +137,7 @@
     "@babel/runtime-corejs3": "latest",
     "@depict-ai/dpc": "^2.0.8",
     "@depict-ai/plp-styling": "^3.0.14",
-    "@depict-ai/ui": "^4.0.27",
+    "@depict-ai/ui": "^4.1.0",
     "@depict-ai/utilishared": "^2.0.16",
     "solid-js": "^1.8.12"
   },

package/server/ES10/index.cjs

@@ -17,6 +17,7 @@ function $parcel$export(e, n, v, s) {
   });
 }
 $parcel$export(module.exports, "DepictProvider", () => $202459d454907b31$export$9fac37a9c21c2f3b);
+$parcel$export(module.exports, "useCategoryFilterHelpers", () => $202459d454907b31$export$72616730c1fad2f4);
 $parcel$export(module.exports, "SearchPage", () => $202459d454907b31$export$a54ec244c8863715);
 $parcel$export(module.exports, "CategoryPage", () => $202459d454907b31$export$f7d2f673fc2f091d);
 $parcel$export(module.exports, "BreadCrumbs", () => $202459d454907b31$export$5646050d516e06bc);
@@ -190,10 +191,18 @@ function $3b36cc844440a979$export$e46079a2793e9ec7(props, set_portals) {
     }
   });
 }
-const $efbdd2dab4314170$export$83d89fbfd8236492 = "4.0.22";
+const $efbdd2dab4314170$export$83d89fbfd8236492 = "4.1.0";
 function $202459d454907b31$export$9fac37a9c21c2f3b(props) {
   return props.children;
 }
+function $202459d454907b31$export$72616730c1fad2f4() {
+  const noop = () => {};
+  return {
+    categorySetShouldShowFilters: noop,
+    categorySetFilter: noop,
+    categoryExpandFilterGroup: noop
+  };
+}
 function $202459d454907b31$export$a54ec244c8863715() {
   return $aNCHr$react.createElement("div", {
     children: []

package/server/ES10/index.d.ts

@@ -1,9 +1,9 @@
 import { DPC } from "@depict-ai/dpc/ES10";
 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/ES10";
+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/ES10";
 import { Locale } from "@depict-ai/ui/locales/ES10";
 import { Display, ModernDisplay } from "@depict-ai/utilishared/ES10";
-export const version = "4.0.22";
+export const version = "4.1.0";
 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.
  */

package/server/ES10/index.js

@@ -167,10 +167,18 @@ function $cd68097a7ee08669$export$e46079a2793e9ec7(props, set_portals) {
     }
   });
 }
-const $9bd9bb8700ab2ada$export$83d89fbfd8236492 = "4.0.22";
+const $9bd9bb8700ab2ada$export$83d89fbfd8236492 = "4.1.0";
 function $5c4add0a8fe94894$export$9fac37a9c21c2f3b(props) {
   return props.children;
 }
+function $5c4add0a8fe94894$export$72616730c1fad2f4() {
+  const noop = () => {};
+  return {
+    categorySetShouldShowFilters: noop,
+    categorySetFilter: noop,
+    categoryExpandFilterGroup: noop
+  };
+}
 function $5c4add0a8fe94894$export$a54ec244c8863715() {
   return $7h5e1$createElement("div", {
     children: []
@@ -271,4 +279,4 @@ function $5c4add0a8fe94894$export$6501da23a2770fc() {
     }
   };
 }
-export { $5c4add0a8fe94894$export$9fac37a9c21c2f3b as DepictProvider, $5c4add0a8fe94894$export$a54ec244c8863715 as SearchPage, $5c4add0a8fe94894$export$f7d2f673fc2f091d as CategoryPage, $5c4add0a8fe94894$export$5646050d516e06bc as BreadCrumbs, $5c4add0a8fe94894$export$466cdc317043f6cb as QuickLinks, $5c4add0a8fe94894$export$82cfdc85a4d15688 as RecommendationSlider, $5c4add0a8fe94894$export$80e99ee6b29cadd2 as ComponentAligner, $5c4add0a8fe94894$export$3f37af283f8fb843 as ImagePlaceholder, $5c4add0a8fe94894$export$b0a773486c1c2312 as RecommendationGrid, $5c4add0a8fe94894$export$89c6019e4baa40b1 as TextPlaceholder, $5c4add0a8fe94894$export$9bb30bbe003b82e0 as useSearchField, $5c4add0a8fe94894$export$a7f6cffb6b8ba11c as openModal, $5c4add0a8fe94894$export$912994940e660d32 as useSearchModal, $5c4add0a8fe94894$export$38b98fae14bd1f64 as usePerformanceClient, $5c4add0a8fe94894$export$6501da23a2770fc as useFetchRecommendations, $9bd9bb8700ab2ada$export$83d89fbfd8236492 as version };
+export { $5c4add0a8fe94894$export$9fac37a9c21c2f3b as DepictProvider, $5c4add0a8fe94894$export$72616730c1fad2f4 as useCategoryFilterHelpers, $5c4add0a8fe94894$export$a54ec244c8863715 as SearchPage, $5c4add0a8fe94894$export$f7d2f673fc2f091d as CategoryPage, $5c4add0a8fe94894$export$5646050d516e06bc as BreadCrumbs, $5c4add0a8fe94894$export$466cdc317043f6cb as QuickLinks, $5c4add0a8fe94894$export$82cfdc85a4d15688 as RecommendationSlider, $5c4add0a8fe94894$export$80e99ee6b29cadd2 as ComponentAligner, $5c4add0a8fe94894$export$3f37af283f8fb843 as ImagePlaceholder, $5c4add0a8fe94894$export$b0a773486c1c2312 as RecommendationGrid, $5c4add0a8fe94894$export$89c6019e4baa40b1 as TextPlaceholder, $5c4add0a8fe94894$export$9bb30bbe003b82e0 as useSearchField, $5c4add0a8fe94894$export$a7f6cffb6b8ba11c as openModal, $5c4add0a8fe94894$export$912994940e660d32 as useSearchModal, $5c4add0a8fe94894$export$38b98fae14bd1f64 as usePerformanceClient, $5c4add0a8fe94894$export$6501da23a2770fc as useFetchRecommendations, $9bd9bb8700ab2ada$export$83d89fbfd8236492 as version };

package/server/latest/index.cjs

@@ -17,6 +17,7 @@ function $parcel$export(e, n, v, s) {
   });
 }
 $parcel$export(module.exports, "DepictProvider", () => $41e7e5d85b5e0d49$export$9fac37a9c21c2f3b);
+$parcel$export(module.exports, "useCategoryFilterHelpers", () => $41e7e5d85b5e0d49$export$72616730c1fad2f4);
 $parcel$export(module.exports, "SearchPage", () => $41e7e5d85b5e0d49$export$a54ec244c8863715);
 $parcel$export(module.exports, "CategoryPage", () => $41e7e5d85b5e0d49$export$f7d2f673fc2f091d);
 $parcel$export(module.exports, "BreadCrumbs", () => $41e7e5d85b5e0d49$export$5646050d516e06bc);
@@ -182,10 +183,18 @@ function $c6b960f2a07285c8$export$e46079a2793e9ec7(props, set_portals) {
     }
   });
 }
-const $db7b67857900028b$export$83d89fbfd8236492 = "4.0.22";
+const $db7b67857900028b$export$83d89fbfd8236492 = "4.1.0";
 function $41e7e5d85b5e0d49$export$9fac37a9c21c2f3b(props) {
   return props.children;
 }
+function $41e7e5d85b5e0d49$export$72616730c1fad2f4() {
+  const noop = () => {};
+  return {
+    categorySetShouldShowFilters: noop,
+    categorySetFilter: noop,
+    categoryExpandFilterGroup: noop
+  };
+}
 function $41e7e5d85b5e0d49$export$a54ec244c8863715() {
   return $7QqFM$react.createElement("div", {
     children: []

package/server/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.22";
+export const version = "4.1.0";
 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.
  */

package/server/latest/index.js

@@ -159,10 +159,18 @@ function $4d5c3f13a5ae62a7$export$e46079a2793e9ec7(props, set_portals) {
     }
   });
 }
-const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "4.0.22";
+const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "4.1.0";
 function $2b1fdeb83610500f$export$9fac37a9c21c2f3b(props) {
   return props.children;
 }
+function $2b1fdeb83610500f$export$72616730c1fad2f4() {
+  const noop = () => {};
+  return {
+    categorySetShouldShowFilters: noop,
+    categorySetFilter: noop,
+    categoryExpandFilterGroup: noop
+  };
+}
 function $2b1fdeb83610500f$export$a54ec244c8863715() {
   return $eOXet$createElement("div", {
     children: []
@@ -263,4 +271,4 @@ function $2b1fdeb83610500f$export$6501da23a2770fc() {
     }
   };
 }
-export { $2b1fdeb83610500f$export$9fac37a9c21c2f3b as DepictProvider, $2b1fdeb83610500f$export$a54ec244c8863715 as SearchPage, $2b1fdeb83610500f$export$f7d2f673fc2f091d as CategoryPage, $2b1fdeb83610500f$export$5646050d516e06bc as BreadCrumbs, $2b1fdeb83610500f$export$466cdc317043f6cb as QuickLinks, $2b1fdeb83610500f$export$82cfdc85a4d15688 as RecommendationSlider, $2b1fdeb83610500f$export$80e99ee6b29cadd2 as ComponentAligner, $2b1fdeb83610500f$export$3f37af283f8fb843 as ImagePlaceholder, $2b1fdeb83610500f$export$b0a773486c1c2312 as RecommendationGrid, $2b1fdeb83610500f$export$89c6019e4baa40b1 as TextPlaceholder, $2b1fdeb83610500f$export$9bb30bbe003b82e0 as useSearchField, $2b1fdeb83610500f$export$a7f6cffb6b8ba11c as openModal, $2b1fdeb83610500f$export$912994940e660d32 as useSearchModal, $2b1fdeb83610500f$export$38b98fae14bd1f64 as usePerformanceClient, $2b1fdeb83610500f$export$6501da23a2770fc as useFetchRecommendations, $c9c4d066f9a5b51b$export$83d89fbfd8236492 as version };
+export { $2b1fdeb83610500f$export$9fac37a9c21c2f3b as DepictProvider, $2b1fdeb83610500f$export$72616730c1fad2f4 as useCategoryFilterHelpers, $2b1fdeb83610500f$export$a54ec244c8863715 as SearchPage, $2b1fdeb83610500f$export$f7d2f673fc2f091d as CategoryPage, $2b1fdeb83610500f$export$5646050d516e06bc as BreadCrumbs, $2b1fdeb83610500f$export$466cdc317043f6cb as QuickLinks, $2b1fdeb83610500f$export$82cfdc85a4d15688 as RecommendationSlider, $2b1fdeb83610500f$export$80e99ee6b29cadd2 as ComponentAligner, $2b1fdeb83610500f$export$3f37af283f8fb843 as ImagePlaceholder, $2b1fdeb83610500f$export$b0a773486c1c2312 as RecommendationGrid, $2b1fdeb83610500f$export$89c6019e4baa40b1 as TextPlaceholder, $2b1fdeb83610500f$export$9bb30bbe003b82e0 as useSearchField, $2b1fdeb83610500f$export$a7f6cffb6b8ba11c as openModal, $2b1fdeb83610500f$export$912994940e660d32 as useSearchModal, $2b1fdeb83610500f$export$38b98fae14bd1f64 as usePerformanceClient, $2b1fdeb83610500f$export$6501da23a2770fc as useFetchRecommendations, $c9c4d066f9a5b51b$export$83d89fbfd8236492 as version };