@depict-ai/react-ui 1.4.1 → 1.5.2

package/README.md

@@ -5,4 +5,5 @@ See the [documentation](https://docs.depict.ai/docs/sdk-intro).
 Breaking changes:
 
 - 1.3.0 moved `depict-filter-sort-mobile-modal-container` from being a class to being an id
-- 1.4.0 Added `brand_` translation string to Locale.
+- 1.4.0 Added `brand_` translation string to Locale.
+- 1.5.0: Don't allow creating two `DepictProvider` instances. Don't allow two synced SearchPage and CategoryPage's to be created. Add `stateKey` property to all the components which can be used to create two instances of everything with completely different states.

package/dist/index.d.ts

@@ -3,7 +3,7 @@ import { Display, ModernDisplay } from "@depict-ai/utilishared";
 import React, { ReactNode, PropsWithChildren, ReactElement } from "react";
 import { DPC } from "@depict-ai/dpc";
 import { Locale } from "@depict-ai/ui/locales";
-export const version = "1.4.1";
+export const version = "1.5.2";
 interface PLPConfig<T extends Display> extends BaseProductListingConfig {
     /**
      * The product card to use for rendering products.
@@ -169,10 +169,14 @@ export function DepictProvider<InputDisplay extends Display, OutputDisplay exten
  */
 export const ComponentAligner: import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>>;
 interface SearchPageConfig<T extends Display> extends BaseSearchPageConfig, PLPConfig<T> {
+    /**
+     * When using multiple search instances 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 modal with a SearchPage keyed component, set the same stateKey on both. If no stateKey is provided, the "default" instance will be used.
+     */
+    stateKey?: string;
 }
 /**
  * SearchPage is a component that renders a Depict search results page.
- * @param props - The props for the search page.
+ * @param props - The props for the search page. Go to definition for more info.
  *
  * @example
  * ```tsx
@@ -224,17 +228,21 @@ interface CategoryPageConfig<T extends Display> extends BaseCategoryPageConfig,
      *
      * @example
      * ```tsx
-     * <CategoryPage categoryId="jeans" productCard={MyCustomCategoryProductCard}  categoryTitlePlugin={CategoryTitle} />
+     * <CategoryPage categoryId="jeans" 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/docs/specifying-listing-type-in-the-category-page-sdk
+     * 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.
+     */
+    stateKey?: string;
 }
 /**
- * CategoryPage is a component that renders a Depict category page.
+ * CategoryPage is a component that renders a Depict category page. Go to definition on the props for more info.
  * @param props the props for the category page.
  *
  * @example
@@ -277,12 +285,18 @@ export function CategoryPage<OriginalDisplay extends Display, OutputDisplay exte
 ] extends [never] ? OriginalDisplay : ModernDisplayWithPageUrl<OutputDisplay>>): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
 /**
  * BreadCrumbs is the "trail" in the header of a category page.
+ * @property stateKey - When using multiple CategoryPage components on the same page, you need to set a unique stateKey for each one. To associate a certain BreadCrumbs component with a certain CategoryPage component, set the same stateKey on both.
  */
-export function BreadCrumbs(): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export function BreadCrumbs(react_props: {
+    stateKey?: string | undefined;
+}): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
 /**
  * QuickLinks is a component enabling the user to go sideways and downwards in the category tree.
+ * @property stateKey - When using multiple CategoryPage components on the same page, you need to set a unique stateKey for each one. To associate a certain QuickLinks component with a certain CategoryPage component, set the same stateKey on both.
  */
-export function QuickLinks(): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export function QuickLinks(react_props?: {
+    stateKey?: string | undefined;
+}): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
 /**
  * A placeholder that can be used instead of an image or other block of content while it's loading.
  * The placeholder has `display:block`, meaning it will create a new "row" in the layout for itself. Can be used either for images with a defined aspect ratio (ContainedImage) or blocks.
@@ -344,6 +358,10 @@ interface UseSearchModalParams {
      * ```
      */
     alignerRef?: React.RefObject<HTMLElement>;
+    /**
+     * When using multiple search instances 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 modal with a SearchPage keyed component, set the same stateKey on both. If no stateKey is provided, the "default" instance will be used.
+     */
+    stateKey?: string;
 }
 type OpenModal = () => void;
 /**
@@ -386,6 +404,10 @@ interface SearchFieldProps {
      * If not provided, the modal will be aligned to the search field itself.
      */
     alignerRef?: React.RefObject<HTMLElement>;
+    /**
+     * When using multiple search instances 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 modal with a SearchPage keyed component, set the same stateKey on both. If no stateKey is provided, the "default" instance will be used.
+     */
+    stateKey?: string;
 }
 interface UseSearchFieldReturn {
     /**