@depict-ai/react-ui 3.0.0 → 3.0.2

package/latest/index.cjs

@@ -39,7 +39,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 = "3.0.0";
+const $db7b67857900028b$export$83d89fbfd8236492 = "3.0.2";
 const $0b7cd4fb39fc3502$export$8e769ad4338a911e = {
   usedLocale: $2IzJs$solidjs.createSignal((0, $2IzJs$depictaiuilocales.defaultLocale)),
   search_instances: new Map(),
@@ -55,7 +55,6 @@ const $0b7cd4fb39fc3502$export$8e769ad4338a911e = {
   category_page_in_dom: $2IzJs$solidjs.createSignal(false),
   provider_is_updating: $2IzJs$solidjs.createSignal(false),
   enable_content_search: $2IzJs$solidjs.createSignal(),
-  category_meta_title_suffix: $2IzJs$solidjs.createSignal(),
   disable_override_listing_id: $2IzJs$solidjs.createSignal()
 };
 let $b4d0d98857ed9934$var$run_on_href_change;
@@ -306,7 +305,6 @@ function $da98aca6c7d4c3f9$export$248b95d5073d5bab(disposable, stateKey) {
       usedLocale: [get_locale],
       merchant: [get_merchant],
       market: [get_market],
-      category_meta_title_suffix: [get_category_meta_title_suffix],
       disable_override_listing_id: [get_disable_override_listing_id]
     } = (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e);
     const instance = new (0, $2IzJs$depictaiui.DepictCategory)({
@@ -328,7 +326,6 @@ function $da98aca6c7d4c3f9$export$248b95d5073d5bab(disposable, stateKey) {
       if (new_market) instance.market = new_market;
     });
     $2IzJs$solidjs.createComputed(() => instance.localization = get_locale());
-    $2IzJs$solidjs.createComputed(() => instance.meta_title_suffix = get_category_meta_title_suffix());
     $2IzJs$solidjs.createComputed(() => instance.disable_override_listing_id = get_disable_override_listing_id());
     return {
       instance: instance,
@@ -375,7 +372,6 @@ function $24b00503eef73528$var$ActualDepictProvider(props) {
   (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).metaData = metaData;
   (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).search_query_url_param_name = urlParamName;
   (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).enableCategorySuggestions = enableCategorySuggestions;
-  (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).category_meta_title_suffix[1](props.category?.metaTitleSuffix);
   (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).disable_override_listing_id[1](props.category?.disableOverrideListingId);
   $25c0a91312868994$export$47e064413edabf36(merchant, market, sessionId);
   if (!market || !merchant) return $2IzJs$react.createElement((0, $2IzJs$react.Fragment), null, children);
@@ -404,7 +400,6 @@ function $24b00503eef73528$var$ActualDepictProvider(props) {
       get_metadata: async () => (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).metaData,
       get_session_id: () => $2IzJs$solidjs.untrack((0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).sessionId[0])
     });
-    (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).api.page_url_creator = props.pageURLCreator;
     (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).api.display_transformers = props.displayTransformers;
     if (searchPagePath) set_search_page_path($24b00503eef73528$var$ensure_correct_formatting(searchPagePath));
     if (!search_instances.get(undefined)) {
@@ -678,10 +673,10 @@ function $5aa5fcb9f8a2bebc$var$SolidCategoryPage(props, set_portals) {
   $2IzJs$solidjs.onCleanup(() => set_category_page_in_dom(false));
   $2IzJs$solidjs.createComputed(() => {
     const {
-      listingId: listingId
+      listingQuery: listingQuery
     } = props;
-    depict_category().listing_id = listingId;
-    if (listingId) {
+    depict_category().listing_query = listingQuery;
+    if (listingQuery) {
       set_category_state_set(true);
       (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).known_category_paths.add(location.pathname);
     }
@@ -789,6 +784,29 @@ function $67657ea54664baa8$export$4daadad26e48a2c7(props) {
     throw new Error(us + " props.recommendations needs to be a promise that is either unresolved (`new Promise(() => {})`) so we can show placeholders, or resolved (`Promise.resolve(recommendation_array)`) to the recommendations to show");
   }
 }
+function $3d35ad83c8fdfa92$export$12250cb2badef3d2(props) {
+  const recs = props.recommendations;
+  if ("then" in recs)
+    // Run displayTransformers for RecommendationSlider and RecommendationGrid
+    return recs.then(async displays => {
+      const transformFunction = (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).api?.display_transformers?.products;
+      if (transformFunction) try {
+        return await transformFunction({
+          merchant: (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).merchant[0](),
+          market: (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).market[0](),
+          displays: displays
+        });
+      } catch (e) {
+        console.error(e);
+        throw new Error("Error running display transformer for recommendations", {
+          cause: e
+        }); // To stop recommendation grid from rendering
+      }
+
+      return displays;
+    });
+  return recs;
+}
 function $8ffd7da37fdd46be$export$82cfdc85a4d15688(props) {
   $67657ea54664baa8$export$4daadad26e48a2c7(props);
   return $b4d0d98857ed9934$export$f6e64e17bd69eeef({
@@ -800,7 +818,7 @@ function $8ffd7da37fdd46be$export$5abb40edfde2a843(props, set_portals) {
   const component_portals = new Set();
   return $2IzJs$depictaiui.RecommendationSlider({
     get recommendations() {
-      return props.recommendations;
+      return $3d35ad83c8fdfa92$export$12250cb2badef3d2(props);
     },
     product_card_template: display => $6081519c185fcf70$export$32024253978abdc7({
       component_props: {
@@ -825,7 +843,7 @@ function $c6b960f2a07285c8$export$e46079a2793e9ec7(props, set_portals) {
   const component_portals = new Set();
   return $2IzJs$depictaiui.RecommendationGrid({
     get recommendations() {
-      return props.recommendations;
+      return $3d35ad83c8fdfa92$export$12250cb2badef3d2(props);
     },
     product_card_template: display => {
       if (0, $2IzJs$solidjsweb.isServer)
@@ -950,14 +968,17 @@ function $a134ea100690b628$var$fetchRecommendations(opts) {
   const {
     merchant: [get_merchant],
     market: [get_market],
+    usedLocale: [get_usedLocale],
     sessionId: [get_sessionId]
   } = (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e);
   const merchant = $2IzJs$solidjs.untrack(get_merchant);
   const market = $2IzJs$solidjs.untrack(get_market);
-  if (!merchant || !market) throw new Error("Depict recommendations are not configured. Wrap your app in a DepictProvider.");
+  const locale = $2IzJs$solidjs.untrack(get_usedLocale).backend_locale_;
+  if (!merchant || !market || !locale) throw new Error("Depict recommendations are not configured (merchant, market or locale is falsy). Wrap your app in a DepictProvider.");
   return $2IzJs$depictaiui.fetchDepictRecommendations({
     merchant: merchant,
     market: market,
+    locale: locale,
     sessionId: $2IzJs$solidjs.untrack(get_sessionId),
     ...opts
   });

package/latest/index.d.ts

@@ -1,9 +1,9 @@
 import { DPC } from "@depict-ai/dpc/latest";
-import React, { PropsWithChildren, ReactNode, FC, ReactPortal, ReactElement } from "react";
-import { BaseProviderConfig, BaseSearchProviderConfig, BaseCategoryProviderConfig, ModernDisplayWithPageUrl, BaseProductListingConfig, BaseSearchPageConfig, BaseCategoryPageConfig, CategoryTitle, embedded_num_products, ImagePlaceholder as _ImagePlaceholder1, TextPlaceholder as _TextPlaceholder1, ExclusiveId, fetchDepictRecommendations } from "@depict-ai/ui/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 { Locale } from "@depict-ai/ui/locales/latest";
 import { Display, ModernDisplay } from "@depict-ai/utilishared/latest";
-export const version = "3.0.0";
+export const version = "3.0.2";
 interface UsePerformanceClientReturn {
   dpc: DPC;
 }
@@ -248,9 +248,11 @@ interface SearchPageConfig<T extends Display> extends BaseSearchPageConfig, PLPC
 export function SearchPage<OriginalDisplay extends Display, OutputDisplay extends ModernDisplay | never>(props: SearchPageConfig<[OutputDisplay] extends [never] ? OriginalDisplay : ModernDisplayWithPageUrl<OutputDisplay>>): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
 interface CategoryPageConfig<T extends Display> extends BaseCategoryPageConfig, PLPConfig<T> {
   /**
-   * The listing id to show. Ultimately, this endpoint is what gives you the listing id: https://api.depict.ai/docs#tag/Listing/operation/Get_Listings_v3_listings_get
+   * The listing to query Depict for. `type` can be `"listingId"` or `"externalId"` and `id` is the actual id.
+   * If `id` is `"listingId"`, it should be a uuid where Depict is the source of truth, you can get them here: https://api.depict.ai/docs#tag/Listing/operation/Get_Listings_v3_listings_get.
+   * If `id` is `"externalId"`, it should be the id of the product listing in your system - whatever was passed to Depict during data ingestion.
    */
-  listingId: string;
+  listingQuery: ListingQuery;
   /**
    * categoryTitlePlugin is an optional plugin that can be used to customize the title of the category page.
    * @default CategoryTitle
@@ -531,7 +533,7 @@ interface UseSearchFieldReturn {
  * @returns {UseSearchFieldReturn}
  */
 export const useSearchField: (props?: SearchFieldProps) => UseSearchFieldReturn;
-type FetchRecsOptions = Omit<Parameters<typeof fetchDepictRecommendations>[0], "merchant" | "market" | "sessionId"> & ExclusiveId;
+type FetchRecsOptions = Omit<Parameters<typeof fetchDepictRecommendations>[0], "merchant" | "market" | "sessionId" | "locale"> & ExclusiveId;
 interface UseFetchRecommendationsReturn<T extends Display> {
   /**
    * Fetch recommendations from the Depict API.
@@ -607,5 +609,5 @@ export const Navigation: {
   nextRouterNavigation: (router: import("next/router").NextRouter) => import("src/ui/components/DepictProvider").NavigateFunction;
 };
 export { CategoryTitle, embedded_num_products as EmbeddedNumProducts } from "@depict-ai/ui";
-export type { PageURLCreator, DisplayTransformers } from "@depict-ai/ui";
+export type { DisplayTransformers } from "@depict-ai/ui";
 export type { Locale } from "@depict-ai/ui/locales";

package/latest/index.js

@@ -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 = "3.0.0";
+const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "3.0.2";
 const $42858f023ef23dab$export$8e769ad4338a911e = {
   usedLocale: $2GFvs$createSignal((0, $2GFvs$defaultLocale)),
   search_instances: new Map(),
@@ -31,7 +31,6 @@ const $42858f023ef23dab$export$8e769ad4338a911e = {
   category_page_in_dom: $2GFvs$createSignal(false),
   provider_is_updating: $2GFvs$createSignal(false),
   enable_content_search: $2GFvs$createSignal(),
-  category_meta_title_suffix: $2GFvs$createSignal(),
   disable_override_listing_id: $2GFvs$createSignal()
 };
 let $c83ba9ab79386687$var$run_on_href_change;
@@ -282,7 +281,6 @@ function $9145bcf81a0216ce$export$248b95d5073d5bab(disposable, stateKey) {
       usedLocale: [get_locale],
       merchant: [get_merchant],
       market: [get_market],
-      category_meta_title_suffix: [get_category_meta_title_suffix],
       disable_override_listing_id: [get_disable_override_listing_id]
     } = (0, $42858f023ef23dab$export$8e769ad4338a911e);
     const instance = new (0, $2GFvs$DepictCategory)({
@@ -304,7 +302,6 @@ function $9145bcf81a0216ce$export$248b95d5073d5bab(disposable, stateKey) {
       if (new_market) instance.market = new_market;
     });
     $2GFvs$createComputed(() => instance.localization = get_locale());
-    $2GFvs$createComputed(() => instance.meta_title_suffix = get_category_meta_title_suffix());
     $2GFvs$createComputed(() => instance.disable_override_listing_id = get_disable_override_listing_id());
     return {
       instance: instance,
@@ -351,7 +348,6 @@ function $5376eb2a386cd90d$var$ActualDepictProvider(props) {
   (0, $42858f023ef23dab$export$8e769ad4338a911e).metaData = metaData;
   (0, $42858f023ef23dab$export$8e769ad4338a911e).search_query_url_param_name = urlParamName;
   (0, $42858f023ef23dab$export$8e769ad4338a911e).enableCategorySuggestions = enableCategorySuggestions;
-  (0, $42858f023ef23dab$export$8e769ad4338a911e).category_meta_title_suffix[1](props.category?.metaTitleSuffix);
   (0, $42858f023ef23dab$export$8e769ad4338a911e).disable_override_listing_id[1](props.category?.disableOverrideListingId);
   $a00d8f27abd5d0b0$export$47e064413edabf36(merchant, market, sessionId);
   if (!market || !merchant) return $2GFvs$createElement((0, $2GFvs$Fragment), null, children);
@@ -380,7 +376,6 @@ function $5376eb2a386cd90d$var$ActualDepictProvider(props) {
       get_metadata: async () => (0, $42858f023ef23dab$export$8e769ad4338a911e).metaData,
       get_session_id: () => $2GFvs$untrack((0, $42858f023ef23dab$export$8e769ad4338a911e).sessionId[0])
     });
-    (0, $42858f023ef23dab$export$8e769ad4338a911e).api.page_url_creator = props.pageURLCreator;
     (0, $42858f023ef23dab$export$8e769ad4338a911e).api.display_transformers = props.displayTransformers;
     if (searchPagePath) set_search_page_path($5376eb2a386cd90d$var$ensure_correct_formatting(searchPagePath));
     if (!search_instances.get(undefined)) {
@@ -654,10 +649,10 @@ function $48d7f568740a317d$var$SolidCategoryPage(props, set_portals) {
   $2GFvs$onCleanup(() => set_category_page_in_dom(false));
   $2GFvs$createComputed(() => {
     const {
-      listingId: listingId
+      listingQuery: listingQuery
     } = props;
-    depict_category().listing_id = listingId;
-    if (listingId) {
+    depict_category().listing_query = listingQuery;
+    if (listingQuery) {
       set_category_state_set(true);
       (0, $42858f023ef23dab$export$8e769ad4338a911e).known_category_paths.add(location.pathname);
     }
@@ -765,6 +760,29 @@ function $ab2bb2d1f47a25b7$export$4daadad26e48a2c7(props) {
     throw new Error(us + " props.recommendations needs to be a promise that is either unresolved (`new Promise(() => {})`) so we can show placeholders, or resolved (`Promise.resolve(recommendation_array)`) to the recommendations to show");
   }
 }
+function $5ee8e057dabc10d4$export$12250cb2badef3d2(props) {
+  const recs = props.recommendations;
+  if ("then" in recs)
+    // Run displayTransformers for RecommendationSlider and RecommendationGrid
+    return recs.then(async displays => {
+      const transformFunction = (0, $42858f023ef23dab$export$8e769ad4338a911e).api?.display_transformers?.products;
+      if (transformFunction) try {
+        return await transformFunction({
+          merchant: (0, $42858f023ef23dab$export$8e769ad4338a911e).merchant[0](),
+          market: (0, $42858f023ef23dab$export$8e769ad4338a911e).market[0](),
+          displays: displays
+        });
+      } catch (e) {
+        console.error(e);
+        throw new Error("Error running display transformer for recommendations", {
+          cause: e
+        }); // To stop recommendation grid from rendering
+      }
+
+      return displays;
+    });
+  return recs;
+}
 function $4fd5dc0e231a60d9$export$82cfdc85a4d15688(props) {
   $ab2bb2d1f47a25b7$export$4daadad26e48a2c7(props);
   return $c83ba9ab79386687$export$f6e64e17bd69eeef({
@@ -776,7 +794,7 @@ function $4fd5dc0e231a60d9$export$5abb40edfde2a843(props, set_portals) {
   const component_portals = new Set();
   return $2GFvs$RecommendationSlider({
     get recommendations() {
-      return props.recommendations;
+      return $5ee8e057dabc10d4$export$12250cb2badef3d2(props);
     },
     product_card_template: display => $bcf84a32dc612a43$export$32024253978abdc7({
       component_props: {
@@ -801,7 +819,7 @@ function $4d5c3f13a5ae62a7$export$e46079a2793e9ec7(props, set_portals) {
   const component_portals = new Set();
   return $2GFvs$RecommendationGrid({
     get recommendations() {
-      return props.recommendations;
+      return $5ee8e057dabc10d4$export$12250cb2badef3d2(props);
     },
     product_card_template: display => {
       if (0, $2GFvs$isServer)
@@ -926,14 +944,17 @@ function $1bb4271dc44722e2$var$fetchRecommendations(opts) {
   const {
     merchant: [get_merchant],
     market: [get_market],
+    usedLocale: [get_usedLocale],
     sessionId: [get_sessionId]
   } = (0, $42858f023ef23dab$export$8e769ad4338a911e);
   const merchant = $2GFvs$untrack(get_merchant);
   const market = $2GFvs$untrack(get_market);
-  if (!merchant || !market) throw new Error("Depict recommendations are not configured. Wrap your app in a DepictProvider.");
+  const locale = $2GFvs$untrack(get_usedLocale).backend_locale_;
+  if (!merchant || !market || !locale) throw new Error("Depict recommendations are not configured (merchant, market or locale is falsy). Wrap your app in a DepictProvider.");
   return $2GFvs$fetchDepictRecommendations({
     merchant: merchant,
     market: market,
+    locale: locale,
     sessionId: $2GFvs$untrack(get_sessionId),
     ...opts
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depict-ai/react-ui",
-  "version": "3.0.0",
+  "version": "3.0.2",
   "packageManager": "yarn@3.2.2",
   "source": "src/index.ts",
   "types": "ES10/index.d.ts",
@@ -135,10 +135,10 @@
     "@babel/plugin-transform-typescript": "^7.22.9",
     "@babel/runtime": "latest",
     "@babel/runtime-corejs3": "latest",
-    "@depict-ai/dpc": "^2.0.0",
-    "@depict-ai/plp-styling": "^2.0.0",
-    "@depict-ai/ui": "^3.0.0",
-    "@depict-ai/utilishared": "^2.0.0",
+    "@depict-ai/dpc": "^2.0.1",
+    "@depict-ai/plp-styling": "^2.0.1",
+    "@depict-ai/ui": "^3.0.4",
+    "@depict-ai/utilishared": "^2.0.1",
     "solid-js": "^1.8.1"
   },
   "peerDependencies": {
@@ -150,7 +150,7 @@
     "@babel/core": "latest",
     "@babel/preset-env": "latest",
     "@babel/preset-typescript": "latest",
-    "@depict-ai/plp-styling": "^2.0.0",
+    "@depict-ai/plp-styling": "^2.0.1",
     "@jest/globals": "^29.3.1",
     "@parcel/babel-preset-env": "^2.10.3",
     "@parcel/transformer-sass": "^2.10.3",

package/server/ES10/index.cjs

@@ -7,6 +7,7 @@ var $aNCHr$reactdomserver = require("react-dom/server");
 var $aNCHr$solidjs = require("solid-js");
 var $aNCHr$reactjsxruntime = require("react/jsx-runtime");
 var $aNCHr$reactdom = require("react-dom");
+var $aNCHr$depictaiuilocales = require("@depict-ai/ui/locales/ES10");
 require("../../multi_import_deduplicator.cjs").register_es_version("react-ui", "ES10");
 function $parcel$export(e, n, v, s) {
   Object.defineProperty(e, n, {
@@ -140,11 +141,52 @@ async function $3441d987b5ea85cb$export$32024253978abdc7(_ref) {
   await react_has_ran_hooks; // After React has created elements it still takes some time to actually connect the refs and run the hooks. We don't want to replace placeholders before then.
   return [solid_container];
 }
+const $ef516b1f92253963$export$8e769ad4338a911e = {
+  usedLocale: $aNCHr$solidjs.createSignal((0, $aNCHr$depictaiuilocales.defaultLocale)),
+  search_instances: new Map(),
+  category_instances: new Map(),
+  api: null,
+  dpc: null,
+  merchant: $aNCHr$solidjs.createSignal(),
+  market: $aNCHr$solidjs.createSignal(),
+  sessionId: $aNCHr$solidjs.createSignal(),
+  known_category_paths: new Set(),
+  search_page_path_: $aNCHr$solidjs.createSignal(),
+  search_page_in_dom: $aNCHr$solidjs.createSignal(false),
+  category_page_in_dom: $aNCHr$solidjs.createSignal(false),
+  provider_is_updating: $aNCHr$solidjs.createSignal(false),
+  enable_content_search: $aNCHr$solidjs.createSignal(),
+  disable_override_listing_id: $aNCHr$solidjs.createSignal()
+};
+function $7b4cd941f15b2582$export$12250cb2badef3d2(props) {
+  const recs = props.recommendations;
+  if ("then" in recs)
+    // Run displayTransformers for RecommendationSlider and RecommendationGrid
+    return recs.then(async displays => {
+      var _globalState$api, _globalState$api$disp;
+      const transformFunction = (_globalState$api = (0, $ef516b1f92253963$export$8e769ad4338a911e).api) === null || _globalState$api === void 0 ? void 0 : (_globalState$api$disp = _globalState$api.display_transformers) === null || _globalState$api$disp === void 0 ? void 0 : _globalState$api$disp.products;
+      if (transformFunction) try {
+        return await transformFunction({
+          merchant: (0, $ef516b1f92253963$export$8e769ad4338a911e).merchant[0](),
+          market: (0, $ef516b1f92253963$export$8e769ad4338a911e).market[0](),
+          displays: displays
+        });
+      } catch (e) {
+        console.error(e);
+        throw new Error("Error running display transformer for recommendations", {
+          cause: e
+        }); // To stop recommendation grid from rendering
+      }
+
+      return displays;
+    });
+  return recs;
+}
 function $3b36cc844440a979$export$e46079a2793e9ec7(props, set_portals) {
   const component_portals = new Set();
   return $aNCHr$depictaiui.RecommendationGrid({
     get recommendations() {
-      return props.recommendations;
+      return $7b4cd941f15b2582$export$12250cb2badef3d2(props);
     },
     product_card_template: display => {
       if (0, $aNCHr$solidjsweb.isServer)
@@ -190,7 +232,7 @@ function $3b36cc844440a979$export$e46079a2793e9ec7(props, set_portals) {
     }
   });
 }
-const $efbdd2dab4314170$export$83d89fbfd8236492 = "3.0.0";
+const $efbdd2dab4314170$export$83d89fbfd8236492 = "3.0.2";
 function $202459d454907b31$export$9fac37a9c21c2f3b(props) {
   return props.children;
 }

package/server/ES10/index.d.ts

@@ -1,9 +1,9 @@
 import { DPC } from "@depict-ai/dpc/ES10";
-import React, { PropsWithChildren, ReactNode, FC, ReactPortal, ReactElement } from "react";
-import { BaseProviderConfig, BaseSearchProviderConfig, BaseCategoryProviderConfig, ModernDisplayWithPageUrl, BaseProductListingConfig, BaseSearchPageConfig, BaseCategoryPageConfig, CategoryTitle, embedded_num_products, ImagePlaceholder as _ImagePlaceholder1, TextPlaceholder as _TextPlaceholder1, ExclusiveId, fetchDepictRecommendations } from "@depict-ai/ui/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 { Locale } from "@depict-ai/ui/locales/ES10";
 import { Display, ModernDisplay } from "@depict-ai/utilishared/ES10";
-export const version = "3.0.0";
+export const version = "3.0.2";
 interface UsePerformanceClientReturn {
   dpc: DPC;
 }
@@ -248,9 +248,11 @@ interface SearchPageConfig<T extends Display> extends BaseSearchPageConfig, PLPC
 export function SearchPage<OriginalDisplay extends Display, OutputDisplay extends ModernDisplay | never>(props: SearchPageConfig<[OutputDisplay] extends [never] ? OriginalDisplay : ModernDisplayWithPageUrl<OutputDisplay>>): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
 interface CategoryPageConfig<T extends Display> extends BaseCategoryPageConfig, PLPConfig<T> {
   /**
-   * The listing id to show. Ultimately, this endpoint is what gives you the listing id: https://api.depict.ai/docs#tag/Listing/operation/Get_Listings_v3_listings_get
+   * The listing to query Depict for. `type` can be `"listingId"` or `"externalId"` and `id` is the actual id.
+   * If `id` is `"listingId"`, it should be a uuid where Depict is the source of truth, you can get them here: https://api.depict.ai/docs#tag/Listing/operation/Get_Listings_v3_listings_get.
+   * If `id` is `"externalId"`, it should be the id of the product listing in your system - whatever was passed to Depict during data ingestion.
    */
-  listingId: string;
+  listingQuery: ListingQuery;
   /**
    * categoryTitlePlugin is an optional plugin that can be used to customize the title of the category page.
    * @default CategoryTitle
@@ -531,7 +533,7 @@ interface UseSearchFieldReturn {
  * @returns {UseSearchFieldReturn}
  */
 export const useSearchField: (props?: SearchFieldProps) => UseSearchFieldReturn;
-type FetchRecsOptions = Omit<Parameters<typeof fetchDepictRecommendations>[0], "merchant" | "market" | "sessionId"> & ExclusiveId;
+type FetchRecsOptions = Omit<Parameters<typeof fetchDepictRecommendations>[0], "merchant" | "market" | "sessionId" | "locale"> & ExclusiveId;
 interface UseFetchRecommendationsReturn<T extends Display> {
   /**
    * Fetch recommendations from the Depict API.
@@ -607,5 +609,5 @@ export const Navigation: {
   nextRouterNavigation: (router: import("next/router").NextRouter) => import("src/ui/components/DepictProvider").NavigateFunction;
 };
 export { CategoryTitle, embedded_num_products as EmbeddedNumProducts } from "@depict-ai/ui";
-export type { PageURLCreator, DisplayTransformers } from "@depict-ai/ui";
+export type { DisplayTransformers } from "@depict-ai/ui";
 export type { Locale } from "@depict-ai/ui/locales";

package/server/ES10/index.js

@@ -4,9 +4,10 @@ import { ImagePlaceholder as $7h5e1$ImagePlaceholder, TextPlaceholder as $7h5e1$
 import { generateHydrationScript as $7h5e1$generateHydrationScript, renderToString as $7h5e1$renderToString, isServer as $7h5e1$isServer } from "solid-js/web";
 import { dwarn as $7h5e1$dwarn } from "@depict-ai/utilishared/ES10";
 import { renderToString as $7h5e1$renderToString1 } from "react-dom/server";
-import { getOwner as $7h5e1$getOwner, untrack as $7h5e1$untrack, runWithOwner as $7h5e1$runWithOwner, createEffect as $7h5e1$createEffect, on as $7h5e1$on, onCleanup as $7h5e1$onCleanup } from "solid-js";
+import { getOwner as $7h5e1$getOwner, untrack as $7h5e1$untrack, runWithOwner as $7h5e1$runWithOwner, createEffect as $7h5e1$createEffect, on as $7h5e1$on, onCleanup as $7h5e1$onCleanup, createSignal as $7h5e1$createSignal } from "solid-js";
 import { jsx as $7h5e1$jsx } from "react/jsx-runtime";
 import { createPortal as $7h5e1$createPortal } from "react-dom";
+import { defaultLocale as $7h5e1$defaultLocale } from "@depict-ai/ui/locales/ES10";
 
 //"use client"; // <- opt out of react server components to the rendering method where components are rendered both on the client and on the server and then hydrated on the client, see https://www.joshwcomeau.com/react/server-components/#:~:text=Client%20Components%20render%20on%20both%20the%20client%20and%20the%20server.
 // This "use client" actually just gets deleted by parcel, but I'm leaving it because we re-add it in the build scripts and this makes you more aware of that
@@ -117,11 +118,52 @@ async function $cce08f18e2476cbf$export$32024253978abdc7(_ref) {
   await react_has_ran_hooks; // After React has created elements it still takes some time to actually connect the refs and run the hooks. We don't want to replace placeholders before then.
   return [solid_container];
 }
+const $8c691d7f86317052$export$8e769ad4338a911e = {
+  usedLocale: $7h5e1$createSignal((0, $7h5e1$defaultLocale)),
+  search_instances: new Map(),
+  category_instances: new Map(),
+  api: null,
+  dpc: null,
+  merchant: $7h5e1$createSignal(),
+  market: $7h5e1$createSignal(),
+  sessionId: $7h5e1$createSignal(),
+  known_category_paths: new Set(),
+  search_page_path_: $7h5e1$createSignal(),
+  search_page_in_dom: $7h5e1$createSignal(false),
+  category_page_in_dom: $7h5e1$createSignal(false),
+  provider_is_updating: $7h5e1$createSignal(false),
+  enable_content_search: $7h5e1$createSignal(),
+  disable_override_listing_id: $7h5e1$createSignal()
+};
+function $9da62538e07f038e$export$12250cb2badef3d2(props) {
+  const recs = props.recommendations;
+  if ("then" in recs)
+    // Run displayTransformers for RecommendationSlider and RecommendationGrid
+    return recs.then(async displays => {
+      var _globalState$api, _globalState$api$disp;
+      const transformFunction = (_globalState$api = (0, $8c691d7f86317052$export$8e769ad4338a911e).api) === null || _globalState$api === void 0 ? void 0 : (_globalState$api$disp = _globalState$api.display_transformers) === null || _globalState$api$disp === void 0 ? void 0 : _globalState$api$disp.products;
+      if (transformFunction) try {
+        return await transformFunction({
+          merchant: (0, $8c691d7f86317052$export$8e769ad4338a911e).merchant[0](),
+          market: (0, $8c691d7f86317052$export$8e769ad4338a911e).market[0](),
+          displays: displays
+        });
+      } catch (e) {
+        console.error(e);
+        throw new Error("Error running display transformer for recommendations", {
+          cause: e
+        }); // To stop recommendation grid from rendering
+      }
+
+      return displays;
+    });
+  return recs;
+}
 function $cd68097a7ee08669$export$e46079a2793e9ec7(props, set_portals) {
   const component_portals = new Set();
   return $7h5e1$RecommendationGrid({
     get recommendations() {
-      return props.recommendations;
+      return $9da62538e07f038e$export$12250cb2badef3d2(props);
     },
     product_card_template: display => {
       if (0, $7h5e1$isServer)
@@ -167,7 +209,7 @@ function $cd68097a7ee08669$export$e46079a2793e9ec7(props, set_portals) {
     }
   });
 }
-const $9bd9bb8700ab2ada$export$83d89fbfd8236492 = "3.0.0";
+const $9bd9bb8700ab2ada$export$83d89fbfd8236492 = "3.0.2";
 function $5c4add0a8fe94894$export$9fac37a9c21c2f3b(props) {
   return props.children;
 }

package/server/latest/index.cjs

@@ -7,6 +7,7 @@ var $7QqFM$reactdomserver = require("react-dom/server");
 var $7QqFM$solidjs = require("solid-js");
 var $7QqFM$reactjsxruntime = require("react/jsx-runtime");
 var $7QqFM$reactdom = require("react-dom");
+var $7QqFM$depictaiuilocales = require("@depict-ai/ui/locales/latest");
 require("../../multi_import_deduplicator.cjs").register_es_version("react-ui", "latest");
 function $parcel$export(e, n, v, s) {
   Object.defineProperty(e, n, {
@@ -134,11 +135,51 @@ async function $6081519c185fcf70$export$32024253978abdc7({
   await react_has_ran_hooks; // After React has created elements it still takes some time to actually connect the refs and run the hooks. We don't want to replace placeholders before then.
   return [solid_container];
 }
+const $0b7cd4fb39fc3502$export$8e769ad4338a911e = {
+  usedLocale: $7QqFM$solidjs.createSignal((0, $7QqFM$depictaiuilocales.defaultLocale)),
+  search_instances: new Map(),
+  category_instances: new Map(),
+  api: null,
+  dpc: null,
+  merchant: $7QqFM$solidjs.createSignal(),
+  market: $7QqFM$solidjs.createSignal(),
+  sessionId: $7QqFM$solidjs.createSignal(),
+  known_category_paths: new Set(),
+  search_page_path_: $7QqFM$solidjs.createSignal(),
+  search_page_in_dom: $7QqFM$solidjs.createSignal(false),
+  category_page_in_dom: $7QqFM$solidjs.createSignal(false),
+  provider_is_updating: $7QqFM$solidjs.createSignal(false),
+  enable_content_search: $7QqFM$solidjs.createSignal(),
+  disable_override_listing_id: $7QqFM$solidjs.createSignal()
+};
+function $3d35ad83c8fdfa92$export$12250cb2badef3d2(props) {
+  const recs = props.recommendations;
+  if ("then" in recs)
+    // Run displayTransformers for RecommendationSlider and RecommendationGrid
+    return recs.then(async displays => {
+      const transformFunction = (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).api?.display_transformers?.products;
+      if (transformFunction) try {
+        return await transformFunction({
+          merchant: (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).merchant[0](),
+          market: (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).market[0](),
+          displays: displays
+        });
+      } catch (e) {
+        console.error(e);
+        throw new Error("Error running display transformer for recommendations", {
+          cause: e
+        }); // To stop recommendation grid from rendering
+      }
+
+      return displays;
+    });
+  return recs;
+}
 function $c6b960f2a07285c8$export$e46079a2793e9ec7(props, set_portals) {
   const component_portals = new Set();
   return $7QqFM$depictaiui.RecommendationGrid({
     get recommendations() {
-      return props.recommendations;
+      return $3d35ad83c8fdfa92$export$12250cb2badef3d2(props);
     },
     product_card_template: display => {
       if (0, $7QqFM$solidjsweb.isServer)
@@ -182,7 +223,7 @@ function $c6b960f2a07285c8$export$e46079a2793e9ec7(props, set_portals) {
     }
   });
 }
-const $db7b67857900028b$export$83d89fbfd8236492 = "3.0.0";
+const $db7b67857900028b$export$83d89fbfd8236492 = "3.0.2";
 function $41e7e5d85b5e0d49$export$9fac37a9c21c2f3b(props) {
   return props.children;
 }

package/server/latest/index.d.ts

@@ -1,9 +1,9 @@
 import { DPC } from "@depict-ai/dpc/latest";
-import React, { PropsWithChildren, ReactNode, FC, ReactPortal, ReactElement } from "react";
-import { BaseProviderConfig, BaseSearchProviderConfig, BaseCategoryProviderConfig, ModernDisplayWithPageUrl, BaseProductListingConfig, BaseSearchPageConfig, BaseCategoryPageConfig, CategoryTitle, embedded_num_products, ImagePlaceholder as _ImagePlaceholder1, TextPlaceholder as _TextPlaceholder1, ExclusiveId, fetchDepictRecommendations } from "@depict-ai/ui/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 { Locale } from "@depict-ai/ui/locales/latest";
 import { Display, ModernDisplay } from "@depict-ai/utilishared/latest";
-export const version = "3.0.0";
+export const version = "3.0.2";
 interface UsePerformanceClientReturn {
   dpc: DPC;
 }
@@ -248,9 +248,11 @@ interface SearchPageConfig<T extends Display> extends BaseSearchPageConfig, PLPC
 export function SearchPage<OriginalDisplay extends Display, OutputDisplay extends ModernDisplay | never>(props: SearchPageConfig<[OutputDisplay] extends [never] ? OriginalDisplay : ModernDisplayWithPageUrl<OutputDisplay>>): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
 interface CategoryPageConfig<T extends Display> extends BaseCategoryPageConfig, PLPConfig<T> {
   /**
-   * The listing id to show. Ultimately, this endpoint is what gives you the listing id: https://api.depict.ai/docs#tag/Listing/operation/Get_Listings_v3_listings_get
+   * The listing to query Depict for. `type` can be `"listingId"` or `"externalId"` and `id` is the actual id.
+   * If `id` is `"listingId"`, it should be a uuid where Depict is the source of truth, you can get them here: https://api.depict.ai/docs#tag/Listing/operation/Get_Listings_v3_listings_get.
+   * If `id` is `"externalId"`, it should be the id of the product listing in your system - whatever was passed to Depict during data ingestion.
    */
-  listingId: string;
+  listingQuery: ListingQuery;
   /**
    * categoryTitlePlugin is an optional plugin that can be used to customize the title of the category page.
    * @default CategoryTitle
@@ -531,7 +533,7 @@ interface UseSearchFieldReturn {
  * @returns {UseSearchFieldReturn}
  */
 export const useSearchField: (props?: SearchFieldProps) => UseSearchFieldReturn;
-type FetchRecsOptions = Omit<Parameters<typeof fetchDepictRecommendations>[0], "merchant" | "market" | "sessionId"> & ExclusiveId;
+type FetchRecsOptions = Omit<Parameters<typeof fetchDepictRecommendations>[0], "merchant" | "market" | "sessionId" | "locale"> & ExclusiveId;
 interface UseFetchRecommendationsReturn<T extends Display> {
   /**
    * Fetch recommendations from the Depict API.
@@ -607,5 +609,5 @@ export const Navigation: {
   nextRouterNavigation: (router: import("next/router").NextRouter) => import("src/ui/components/DepictProvider").NavigateFunction;
 };
 export { CategoryTitle, embedded_num_products as EmbeddedNumProducts } from "@depict-ai/ui";
-export type { PageURLCreator, DisplayTransformers } from "@depict-ai/ui";
+export type { DisplayTransformers } from "@depict-ai/ui";
 export type { Locale } from "@depict-ai/ui/locales";