@depict-ai/react-ui 2.2.0 → 3.0.0

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 = "2.2.0";
+const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "3.0.0";
 const $42858f023ef23dab$export$8e769ad4338a911e = {
   usedLocale: $2GFvs$createSignal((0, $2GFvs$defaultLocale)),
   search_instances: new Map(),
@@ -24,7 +24,6 @@ const $42858f023ef23dab$export$8e769ad4338a911e = {
   dpc: null,
   merchant: $2GFvs$createSignal(),
   market: $2GFvs$createSignal(),
-  userId: $2GFvs$createSignal(),
   sessionId: $2GFvs$createSignal(),
   known_category_paths: new Set(),
   search_page_path_: $2GFvs$createSignal(),
@@ -33,7 +32,7 @@ const $42858f023ef23dab$export$8e769ad4338a911e = {
   provider_is_updating: $2GFvs$createSignal(false),
   enable_content_search: $2GFvs$createSignal(),
   category_meta_title_suffix: $2GFvs$createSignal(),
-  disable_override_query_id: $2GFvs$createSignal()
+  disable_override_listing_id: $2GFvs$createSignal()
 };
 let $c83ba9ab79386687$var$run_on_href_change;
 let $c83ba9ab79386687$var$old_href = location.href;
@@ -212,7 +211,7 @@ const $a00d8f27abd5d0b0$export$38b98fae14bd1f64 = () => {
     dpc: (0, $42858f023ef23dab$export$8e769ad4338a911e).dpc
   };
 };
-const $a00d8f27abd5d0b0$export$47e064413edabf36 = (merchant, market, userId, sessionId) => {
+const $a00d8f27abd5d0b0$export$47e064413edabf36 = (merchant, market, sessionId) => {
   if (!merchant) return;
   try {
     let {
@@ -223,7 +222,6 @@ const $a00d8f27abd5d0b0$export$47e064413edabf36 = (merchant, market, userId, ses
     });
     dpc.merchant = merchant;
     dpc.market = market;
-    dpc.setUserId(userId);
     dpc.setSessionId(sessionId);
   } catch (e) {
     // Make sure to not break the users app if we throw
@@ -285,7 +283,7 @@ function $9145bcf81a0216ce$export$248b95d5073d5bab(disposable, stateKey) {
       merchant: [get_merchant],
       market: [get_market],
       category_meta_title_suffix: [get_category_meta_title_suffix],
-      disable_override_query_id: [get_disable_override_query_id]
+      disable_override_listing_id: [get_disable_override_listing_id]
     } = (0, $42858f023ef23dab$export$8e769ad4338a911e);
     const instance = new (0, $2GFvs$DepictCategory)({
       api: (0, $42858f023ef23dab$export$8e769ad4338a911e).api,
@@ -307,7 +305,7 @@ function $9145bcf81a0216ce$export$248b95d5073d5bab(disposable, stateKey) {
     });
     $2GFvs$createComputed(() => instance.localization = get_locale());
     $2GFvs$createComputed(() => instance.meta_title_suffix = get_category_meta_title_suffix());
-    $2GFvs$createComputed(() => instance.disable_override_query_id = get_disable_override_query_id());
+    $2GFvs$createComputed(() => instance.disable_override_listing_id = get_disable_override_listing_id());
     return {
       instance: instance,
       dispose: dispose,
@@ -336,7 +334,6 @@ function $5376eb2a386cd90d$var$ActualDepictProvider(props) {
     merchant: merchant,
     locale: locale,
     metaData: metaData,
-    userId: userId,
     sessionId: sessionId
   } = props;
   const usedLocale = locale ?? (0, $2GFvs$defaultLocale);
@@ -348,7 +345,6 @@ function $5376eb2a386cd90d$var$ActualDepictProvider(props) {
   } = props.search ?? {};
   $5376eb2a386cd90d$var$multiple_depictprovider_guard();
   // Will run on other prop changes, but harmless
-  (0, $42858f023ef23dab$export$8e769ad4338a911e).userId[1](userId);
   (0, $42858f023ef23dab$export$8e769ad4338a911e).sessionId[1](sessionId);
   (0, $42858f023ef23dab$export$8e769ad4338a911e).usedLocale[1](usedLocale);
   (0, $42858f023ef23dab$export$8e769ad4338a911e).enable_content_search[1](enableContentSearch);
@@ -356,8 +352,8 @@ function $5376eb2a386cd90d$var$ActualDepictProvider(props) {
   (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_query_id[1](props.category?.disableOverrideQueryId);
-  $a00d8f27abd5d0b0$export$47e064413edabf36(merchant, market, userId, sessionId);
+  (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);
   (0, $42858f023ef23dab$export$8e769ad4338a911e).market[1](market);
   (0, $42858f023ef23dab$export$8e769ad4338a911e).merchant[1](merchant);
@@ -382,7 +378,6 @@ function $5376eb2a386cd90d$var$ActualDepictProvider(props) {
     (0, $42858f023ef23dab$export$8e769ad4338a911e).on_navigation = on_navigation;
     (0, $42858f023ef23dab$export$8e769ad4338a911e).api ||= new (0, $2GFvs$DepictAPI)({
       get_metadata: async () => (0, $42858f023ef23dab$export$8e769ad4338a911e).metaData,
-      get_user_id: () => $2GFvs$untrack((0, $42858f023ef23dab$export$8e769ad4338a911e).userId[0]),
       get_session_id: () => $2GFvs$untrack((0, $42858f023ef23dab$export$8e769ad4338a911e).sessionId[0])
     });
     (0, $42858f023ef23dab$export$8e769ad4338a911e).api.page_url_creator = props.pageURLCreator;
@@ -659,15 +654,14 @@ function $48d7f568740a317d$var$SolidCategoryPage(props, set_portals) {
   $2GFvs$onCleanup(() => set_category_page_in_dom(false));
   $2GFvs$createComputed(() => {
     const {
-      categoryId: categoryId
+      listingId: listingId
     } = props;
-    depict_category().category_id = categoryId;
-    if (categoryId) {
+    depict_category().listing_id = listingId;
+    if (listingId) {
       set_category_state_set(true);
       (0, $42858f023ef23dab$export$8e769ad4338a911e).known_category_paths.add(location.pathname);
     }
   });
-  $2GFvs$createComputed(() => depict_category().listing_type = props.listingType);
   const category = () => $2GFvs$createMemo(() => {
     const stateKey = $2GFvs$untrack(() => props.stateKey);
     if ($48d7f568740a317d$var$rendered_components_with_state_key.has(stateKey)) throw new Error(`You have multiple CategoryPage components with the same stateKey: ${stateKey}. Each CategoryPage component must have a unique stateKey.`);
@@ -771,29 +765,6 @@ 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({
@@ -805,7 +776,7 @@ function $4fd5dc0e231a60d9$export$5abb40edfde2a843(props, set_portals) {
   const component_portals = new Set();
   return $2GFvs$RecommendationSlider({
     get recommendations() {
-      return $5ee8e057dabc10d4$export$12250cb2badef3d2(props);
+      return props.recommendations;
     },
     product_card_template: display => $bcf84a32dc612a43$export$32024253978abdc7({
       component_props: {
@@ -830,7 +801,7 @@ function $4d5c3f13a5ae62a7$export$e46079a2793e9ec7(props, set_portals) {
   const component_portals = new Set();
   return $2GFvs$RecommendationGrid({
     get recommendations() {
-      return $5ee8e057dabc10d4$export$12250cb2badef3d2(props);
+      return props.recommendations;
     },
     product_card_template: display => {
       if (0, $2GFvs$isServer)
@@ -955,7 +926,6 @@ function $1bb4271dc44722e2$var$fetchRecommendations(opts) {
   const {
     merchant: [get_merchant],
     market: [get_market],
-    userId: [get_userId],
     sessionId: [get_sessionId]
   } = (0, $42858f023ef23dab$export$8e769ad4338a911e);
   const merchant = $2GFvs$untrack(get_merchant);
@@ -964,7 +934,6 @@ function $1bb4271dc44722e2$var$fetchRecommendations(opts) {
   return $2GFvs$fetchDepictRecommendations({
     merchant: merchant,
     market: market,
-    userId: $2GFvs$untrack(get_userId),
     sessionId: $2GFvs$untrack(get_sessionId),
     ...opts
   });

package/locales/ES10/index.d.ts

@@ -1,2 +1,2 @@
 export type { plp_shared_i18n, search_i18n, category_i18n, Locale } from "@depict-ai/ui/locales/ES10";
-export { cz, de, en, da, fi, pl, fr, sv, pt, no, nl, es, it } from "@depict-ai/ui/locales/ES10";
+export * from "@depict-ai/ui/locales/ES10";

package/locales/index.d.ts

@@ -1,2 +1,2 @@
 export type { plp_shared_i18n, search_i18n, category_i18n, Locale } from "@depict-ai/ui/locales/ES10";
-export { cz, de, en, da, fi, pl, fr, sv, pt, no, nl, es, it } from "@depict-ai/ui/locales/ES10";
+export * from "@depict-ai/ui/locales/ES10";

package/locales/latest/index.d.ts

@@ -1,2 +1,2 @@
 export type { plp_shared_i18n, search_i18n, category_i18n, Locale } from "@depict-ai/ui/locales/latest";
-export { cz, de, en, da, fi, pl, fr, sv, pt, no, nl, es, it } from "@depict-ai/ui/locales/latest";
+export * from "@depict-ai/ui/locales/latest";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depict-ai/react-ui",
-  "version": "2.2.0",
+  "version": "3.0.0",
   "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": "^1.0.45",
-    "@depict-ai/plp-styling": "^1.2.15",
-    "@depict-ai/ui": "^2.1.23",
-    "@depict-ai/utilishared": "^1.0.51",
+    "@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",
     "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": "^1.2.15",
+    "@depict-ai/plp-styling": "^2.0.0",
     "@jest/globals": "^29.3.1",
     "@parcel/babel-preset-env": "^2.10.3",
     "@parcel/transformer-sass": "^2.10.3",

package/server/ES10/index.cjs

@@ -7,7 +7,6 @@ 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, {
@@ -141,54 +140,11 @@ 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(),
-  userId: $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(),
-  category_meta_title_suffix: $aNCHr$solidjs.createSignal(),
-  disable_override_query_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 $7b4cd941f15b2582$export$12250cb2badef3d2(props);
+      return props.recommendations;
     },
     product_card_template: display => {
       if (0, $aNCHr$solidjsweb.isServer)
@@ -234,7 +190,7 @@ function $3b36cc844440a979$export$e46079a2793e9ec7(props, set_portals) {
     }
   });
 }
-const $efbdd2dab4314170$export$83d89fbfd8236492 = "2.2.0";
+const $efbdd2dab4314170$export$83d89fbfd8236492 = "3.0.0";
 function $202459d454907b31$export$9fac37a9c21c2f3b(props) {
   return props.children;
 }
@@ -334,7 +290,7 @@ function $202459d454907b31$export$38b98fae14bd1f64() {
 function $202459d454907b31$export$6501da23a2770fc() {
   return {
     fetchRecommendations: () => {
-      throw new Error("fetchRecommendations is currently not available on the server due to personalisation/user_id related issues. Please only call it on the client.");
+      throw new Error("fetchRecommendations is currently not available on the server due to personalisation/session_id related issues. Please only call it on the client.");
     }
   };
 }

package/server/ES10/index.d.ts

@@ -3,7 +3,7 @@ import React, { PropsWithChildren, ReactNode, FC, ReactPortal, ReactElement } fr
 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 { Locale } from "@depict-ai/ui/locales/ES10";
 import { Display, ModernDisplay } from "@depict-ai/utilishared/ES10";
-export const version = "2.2.0";
+export const version = "3.0.0";
 interface UsePerformanceClientReturn {
   dpc: DPC;
 }
@@ -83,14 +83,9 @@ type ProviderConfig<OriginalDisplay extends Display, OutputDisplay extends Moder
    */
   navigateFunction?: NavigateFunction;
   /**
-   * The locale to use for the Depict components.
-   * @default en
+   * The locale to use for the Depict components as well as Depict results.
    */
-  locale?: Locale;
-  /**
-   * Unique ID of the currently logged in user, if applicable.
-   */
-  userId?: string;
+  locale: Locale;
   /**
    * Options that are required for search functionality.
    */
@@ -253,23 +248,19 @@ 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 category id to show.
+   * 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
    */
-  categoryId: string;
+  listingId: string;
   /**
    * categoryTitlePlugin is an optional plugin that can be used to customize the title of the category page.
    * @default CategoryTitle
    *
    * @example
    * ```tsx
-   * <CategoryPage categoryId="jeans" productCard={MyCustomCategoryProductCard}  categoryTitlePlugin={EmbeddedNumProducts} />
+   * <CategoryPage listingId="72909a4a-adf7-4355-b7be-f9090d4185db" productCard={MyCustomCategoryProductCard}  categoryTitlePlugin={EmbeddedNumProducts} />
    * ```
    */
   categoryTitlePlugin?: typeof CategoryTitle | typeof embedded_num_products;
-  /**
-   * Whether this page is a collection or a category. If not specified it will be inferred as described in the docs https://docs.depict.ai/reference/category-sdk/specifying-listing-type-in-the-category-page-sdk
-   */
-  listingType?: "collection" | "category";
   /**
    * When using multiple CategoryPage components on the same page, you need to set a unique stateKey for each one. We recommend using an incrementing number, such as "1", "2", "3", etc. To associate a certain BreadCrumbs or QuickLinks component with a certain CategoryPage component, set the same stateKey on both.
    */
@@ -288,7 +279,7 @@ interface CategoryPageConfig<T extends Display> extends BaseCategoryPageConfig,
  * import { DepictProductCard, ImagePlaceholder, Display, CategoryPage } from '@depict-ai/react-ui'
  *
  * function Category() {
- *  return <CategoryPage categoryId="jeans" productCard={MyCustomCategoryProductCard} />
+ *  return <CategoryPage listingId="72909a4a-adf7-4355-b7be-f9090d4185db" productCard={MyCustomCategoryProductCard} />
  * }
  *
  * interface MyCustomDisplay extends Display {}
@@ -540,7 +531,7 @@ interface UseSearchFieldReturn {
  * @returns {UseSearchFieldReturn}
  */
 export const useSearchField: (props?: SearchFieldProps) => UseSearchFieldReturn;
-type FetchRecsOptions = Omit<Parameters<typeof fetchDepictRecommendations>[0], "merchant" | "market" | "userId" | "sessionId"> & ExclusiveId;
+type FetchRecsOptions = Omit<Parameters<typeof fetchDepictRecommendations>[0], "merchant" | "market" | "sessionId"> & ExclusiveId;
 interface UseFetchRecommendationsReturn<T extends Display> {
   /**
    * Fetch recommendations from the Depict API.
@@ -608,7 +599,7 @@ interface UseFetchRecommendationsReturn<T extends Display> {
  * ```
  * @returns {UseFetchRecommendationsReturn}
  */
-export function useFetchRecommendations<T extends Display>(): UseFetchRecommendationsReturn<T>;
+export function useFetchRecommendations<T extends ModernDisplay>(): UseFetchRecommendationsReturn<T>;
 /**
  * Helper function to navigate to a new page depending on the navigation library used.
  */

package/server/ES10/index.js

@@ -4,10 +4,9 @@ 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, createSignal as $7h5e1$createSignal } 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 } 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
@@ -118,54 +117,11 @@ 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(),
-  userId: $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(),
-  category_meta_title_suffix: $7h5e1$createSignal(),
-  disable_override_query_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 $9da62538e07f038e$export$12250cb2badef3d2(props);
+      return props.recommendations;
     },
     product_card_template: display => {
       if (0, $7h5e1$isServer)
@@ -211,7 +167,7 @@ function $cd68097a7ee08669$export$e46079a2793e9ec7(props, set_portals) {
     }
   });
 }
-const $9bd9bb8700ab2ada$export$83d89fbfd8236492 = "2.2.0";
+const $9bd9bb8700ab2ada$export$83d89fbfd8236492 = "3.0.0";
 function $5c4add0a8fe94894$export$9fac37a9c21c2f3b(props) {
   return props.children;
 }
@@ -311,7 +267,7 @@ function $5c4add0a8fe94894$export$38b98fae14bd1f64() {
 function $5c4add0a8fe94894$export$6501da23a2770fc() {
   return {
     fetchRecommendations: () => {
-      throw new Error("fetchRecommendations is currently not available on the server due to personalisation/user_id related issues. Please only call it on the client.");
+      throw new Error("fetchRecommendations is currently not available on the server due to personalisation/session_id related issues. Please only call it on the client.");
     }
   };
 }

package/server/latest/index.cjs

@@ -7,7 +7,6 @@ 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, {
@@ -135,53 +134,11 @@ 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(),
-  userId: $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(),
-  category_meta_title_suffix: $7QqFM$solidjs.createSignal(),
-  disable_override_query_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 $3d35ad83c8fdfa92$export$12250cb2badef3d2(props);
+      return props.recommendations;
     },
     product_card_template: display => {
       if (0, $7QqFM$solidjsweb.isServer)
@@ -225,7 +182,7 @@ function $c6b960f2a07285c8$export$e46079a2793e9ec7(props, set_portals) {
     }
   });
 }
-const $db7b67857900028b$export$83d89fbfd8236492 = "2.2.0";
+const $db7b67857900028b$export$83d89fbfd8236492 = "3.0.0";
 function $41e7e5d85b5e0d49$export$9fac37a9c21c2f3b(props) {
   return props.children;
 }
@@ -325,7 +282,7 @@ function $41e7e5d85b5e0d49$export$38b98fae14bd1f64() {
 function $41e7e5d85b5e0d49$export$6501da23a2770fc() {
   return {
     fetchRecommendations: () => {
-      throw new Error("fetchRecommendations is currently not available on the server due to personalisation/user_id related issues. Please only call it on the client.");
+      throw new Error("fetchRecommendations is currently not available on the server due to personalisation/session_id related issues. Please only call it on the client.");
     }
   };
 }

package/server/latest/index.d.ts

@@ -3,7 +3,7 @@ import React, { PropsWithChildren, ReactNode, FC, ReactPortal, ReactElement } fr
 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 { Locale } from "@depict-ai/ui/locales/latest";
 import { Display, ModernDisplay } from "@depict-ai/utilishared/latest";
-export const version = "2.2.0";
+export const version = "3.0.0";
 interface UsePerformanceClientReturn {
   dpc: DPC;
 }
@@ -83,14 +83,9 @@ type ProviderConfig<OriginalDisplay extends Display, OutputDisplay extends Moder
    */
   navigateFunction?: NavigateFunction;
   /**
-   * The locale to use for the Depict components.
-   * @default en
+   * The locale to use for the Depict components as well as Depict results.
    */
-  locale?: Locale;
-  /**
-   * Unique ID of the currently logged in user, if applicable.
-   */
-  userId?: string;
+  locale: Locale;
   /**
    * Options that are required for search functionality.
    */
@@ -253,23 +248,19 @@ 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 category id to show.
+   * 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
    */
-  categoryId: string;
+  listingId: string;
   /**
    * categoryTitlePlugin is an optional plugin that can be used to customize the title of the category page.
    * @default CategoryTitle
    *
    * @example
    * ```tsx
-   * <CategoryPage categoryId="jeans" productCard={MyCustomCategoryProductCard}  categoryTitlePlugin={EmbeddedNumProducts} />
+   * <CategoryPage listingId="72909a4a-adf7-4355-b7be-f9090d4185db" productCard={MyCustomCategoryProductCard}  categoryTitlePlugin={EmbeddedNumProducts} />
    * ```
    */
   categoryTitlePlugin?: typeof CategoryTitle | typeof embedded_num_products;
-  /**
-   * Whether this page is a collection or a category. If not specified it will be inferred as described in the docs https://docs.depict.ai/reference/category-sdk/specifying-listing-type-in-the-category-page-sdk
-   */
-  listingType?: "collection" | "category";
   /**
    * When using multiple CategoryPage components on the same page, you need to set a unique stateKey for each one. We recommend using an incrementing number, such as "1", "2", "3", etc. To associate a certain BreadCrumbs or QuickLinks component with a certain CategoryPage component, set the same stateKey on both.
    */
@@ -288,7 +279,7 @@ interface CategoryPageConfig<T extends Display> extends BaseCategoryPageConfig,
  * import { DepictProductCard, ImagePlaceholder, Display, CategoryPage } from '@depict-ai/react-ui'
  *
  * function Category() {
- *  return <CategoryPage categoryId="jeans" productCard={MyCustomCategoryProductCard} />
+ *  return <CategoryPage listingId="72909a4a-adf7-4355-b7be-f9090d4185db" productCard={MyCustomCategoryProductCard} />
  * }
  *
  * interface MyCustomDisplay extends Display {}
@@ -540,7 +531,7 @@ interface UseSearchFieldReturn {
  * @returns {UseSearchFieldReturn}
  */
 export const useSearchField: (props?: SearchFieldProps) => UseSearchFieldReturn;
-type FetchRecsOptions = Omit<Parameters<typeof fetchDepictRecommendations>[0], "merchant" | "market" | "userId" | "sessionId"> & ExclusiveId;
+type FetchRecsOptions = Omit<Parameters<typeof fetchDepictRecommendations>[0], "merchant" | "market" | "sessionId"> & ExclusiveId;
 interface UseFetchRecommendationsReturn<T extends Display> {
   /**
    * Fetch recommendations from the Depict API.
@@ -608,7 +599,7 @@ interface UseFetchRecommendationsReturn<T extends Display> {
  * ```
  * @returns {UseFetchRecommendationsReturn}
  */
-export function useFetchRecommendations<T extends Display>(): UseFetchRecommendationsReturn<T>;
+export function useFetchRecommendations<T extends ModernDisplay>(): UseFetchRecommendationsReturn<T>;
 /**
  * Helper function to navigate to a new page depending on the navigation library used.
  */