@depict-ai/react-ui 1.5.3 → 1.5.4

package/{dist → ES10}/index.d.ts

@@ -1,28 +1,28 @@
-import { BaseProductListingConfig, BaseProviderConfig, BaseSearchProviderConfig, ModernDisplayWithPageUrl, BaseSearchPageConfig, BaseCategoryPageConfig, CategoryTitle, embedded_num_products, ImagePlaceholder as _ImagePlaceholder1, TextPlaceholder as _TextPlaceholder1, ExclusiveId, fetchDepictRecommendations } from "@depict-ai/ui";
-import { Display, ModernDisplay } from "@depict-ai/utilishared";
+import { BaseProductListingConfig, BaseProviderConfig, BaseSearchProviderConfig, ModernDisplayWithPageUrl, BaseSearchPageConfig, BaseCategoryPageConfig, CategoryTitle, embedded_num_products, ImagePlaceholder as _ImagePlaceholder1, TextPlaceholder as _TextPlaceholder1, ExclusiveId, fetchDepictRecommendations } from "@depict-ai/ui/ES10";
+import { Display, ModernDisplay } from "@depict-ai/utilishared/ES10";
 import React, { ReactNode, PropsWithChildren, ReactElement } from "react";
-import { DPC } from "@depict-ai/dpc";
-import { Locale } from "@depict-ai/ui/locales";
-export const version = "1.5.3";
+import { DPC } from "@depict-ai/dpc/ES10";
+import { Locale } from "@depict-ai/ui/locales/ES10";
+export const version = "1.5.4";
 interface PLPConfig<T extends Display> extends BaseProductListingConfig {
-    /**
-     * The product card to use for rendering products.
-     */
-    productCard: DepictProductCard<T>;
+  /**
+   * The product card to use for rendering products.
+   */
+  productCard: DepictProductCard<T>;
 }
 /**
  * The Depict product card props.
  */
 export interface DepictProductCardProps<T extends Display> {
-    /** The display data to render. */
-    display: T | null;
+  /** The display data to render. */
+  display: T | null;
 }
 /**
  * Depict product card to use for rendering products.
  */
 export type DepictProductCard<T extends Display> = (props: DepictProductCardProps<T>) => ReactNode;
 interface UsePerformanceClientReturn {
-    dpc: DPC;
+  dpc: DPC;
 }
 /**
  * Hook used to access the Depict Performance Client.
@@ -52,66 +52,66 @@ export const usePerformanceClient: () => UsePerformanceClientReturn;
  * replace: Whether to replace the current url or push a new one.
  */
 type NavigateFunction = (relativeUrl: string, options: {
-    replace: boolean;
-    scroll: boolean;
+  replace: boolean;
+  scroll: boolean;
 }) => void;
 /**
  * The config for the DepictProvider.
  */
 type ProviderConfig<OriginalDisplay extends Display, OutputDisplay extends ModernDisplay | never> = BaseProviderConfig<OriginalDisplay, OutputDisplay> & {
-    /**
-     * The function to use for navigating to a new page.
-     * This function will be used internally by our components to navigate.
-     *
-     * You don't need to provide any in a Next.js context.
-     *
-     * @param relativeUrl - The relative url to navigate to.
-     *
-     * @example
-     * Here is how you would use it with react-router, @reach/router, Gatsby or similar.
-     * ```tsx
-     * import { DepictProvider, Navigation } from "@depict-ai/react-ui";
-     * import { useNavigate } from "react-router-dom";
-     * // import { navigate } from "gatsby";
-     *
-     * function Router() {
-     *   const navigate = useNavigate();
-     *   return (
-     *     <DepictProvider
-     *       merchant="houdini"
-     *       market="en-de"
-     *       navigateFunction={navigate}
-     *       search={{
-     *         searchPagePath: "/search",
-     *       }}
-     *     >
-     *       <Routes>[...]</Routes>
-     *     </DepictProvider>
-     *   );
-     * }
-     * ```
-     * @example
-     * If you're using another library, you can define your own navigate function, that's compatible with the `NavigateFunction` type.
-     * ```tsx
-     * const navigateFunction = (relativeUrl: string, { replace }) => {
-     *  router.push(relativeUrl, { replace });
-     * };
-     * ```
-     */
-    navigateFunction?: NavigateFunction;
-    /**
-     * The locale to use for the Depict components.
-     * @default en
-     */
-    locale?: Locale;
-    /**
-     * Unique ID of the currently logged in user, if applicable.
-     */
-    userId?: string;
-    /**
-     * Options that are required for search functionality.
-     */
-    search?: BaseSearchProviderConfig;
+  /**
+   * The function to use for navigating to a new page.
+   * This function will be used internally by our components to navigate.
+   *
+   * You don't need to provide any in a Next.js context.
+   *
+   * @param relativeUrl - The relative url to navigate to.
+   *
+   * @example
+   * Here is how you would use it with react-router, @reach/router, Gatsby or similar.
+   * ```tsx
+   * import { DepictProvider, Navigation } from "@depict-ai/react-ui";
+   * import { useNavigate } from "react-router-dom";
+   * // import { navigate } from "gatsby";
+   *
+   * function Router() {
+   *   const navigate = useNavigate();
+   *   return (
+   *     <DepictProvider
+   *       merchant="houdini"
+   *       market="en-de"
+   *       navigateFunction={navigate}
+   *       search={{
+   *         searchPagePath: "/search",
+   *       }}
+   *     >
+   *       <Routes>[...]</Routes>
+   *     </DepictProvider>
+   *   );
+   * }
+   * ```
+   * @example
+   * If you're using another library, you can define your own navigate function, that's compatible with the `NavigateFunction` type.
+   * ```tsx
+   * const navigateFunction = (relativeUrl: string, { replace }) => {
+   *  router.push(relativeUrl, { replace });
+   * };
+   * ```
+   */
+  navigateFunction?: NavigateFunction;
+  /**
+   * The locale to use for the Depict components.
+   * @default en
+   */
+  locale?: Locale;
+  /**
+   * Unique ID of the currently logged in user, if applicable.
+   */
+  userId?: string;
+  /**
+   * Options that are required for search functionality.
+   */
+  search?: BaseSearchProviderConfig;
 };
 /**
  * The DepictProvider is a wrapper component that should be used to wrap any component that uses Depict components.
@@ -139,7 +139,7 @@ type ProviderConfig<OriginalDisplay extends Display, OutputDisplay extends Moder
  * @returns {JSX.Element} The DepictProvider.
  */
 export function DepictProvider<InputDisplay extends Display, OutputDisplay extends ModernDisplay | never = InputDisplay extends ModernDisplay ? ModernDisplayWithPageUrl<InputDisplay> : never>(props: PropsWithChildren<ProviderConfig<InputDisplay, OutputDisplay>>): import("react").FunctionComponentElement<{
-    children?: import("react").ReactNode;
+  children?: import("react").ReactNode;
 }>;
 /**
  * A component used to align other Depict components to.
@@ -169,10 +169,10 @@ 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;
+  /**
+   * 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.
@@ -214,32 +214,30 @@ 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>>;
+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.
-     */
-    categoryId: 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} />
-     * ```
-     */
-    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.
-     */
-    stateKey?: string;
+  /**
+   * The category id to show.
+   */
+  categoryId: 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} />
+   * ```
+   */
+  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.
+   */
+  stateKey?: string;
 }
 /**
  * CategoryPage is a component that renders a Depict category page. Go to definition on the props for more info.
@@ -280,22 +278,20 @@ interface CategoryPageConfig<T extends Display> extends BaseCategoryPageConfig,
  * }
  * ```
  */
-export function CategoryPage<OriginalDisplay extends Display, OutputDisplay extends ModernDisplay | never>(props: CategoryPageConfig<[
-    OutputDisplay
-] extends [never] ? OriginalDisplay : ModernDisplayWithPageUrl<OutputDisplay>>): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export function CategoryPage<OriginalDisplay extends Display, OutputDisplay extends ModernDisplay | never>(props: CategoryPageConfig<[OutputDisplay] 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(react_props: {
-    stateKey?: string | undefined;
+  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(react_props?: {
-    stateKey?: string | undefined;
+  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.
@@ -307,7 +303,7 @@ export function QuickLinks(react_props?: {
  * @property style extra styles to add to the placeholder
  */
 export const ImagePlaceholder: React.FC<Parameters<typeof _ImagePlaceholder1>[0] & {
-    className?: string;
+  className?: string;
 }>;
 /**
  * A Placeholder to use instead of some text, while it's loading. This is the inline version, meant to be embedded into sentences (or exist instead of them), etc.
@@ -318,50 +314,47 @@ export const ImagePlaceholder: React.FC<Parameters<typeof _ImagePlaceholder1>[0]
  * @property style extra styles to add to the placeholder
  */
 export const TextPlaceholder: React.FC<Parameters<typeof _TextPlaceholder1>[0] & {
-    className?: string;
+  className?: string;
 }>;
 /**
  * Parameters to configure the search modal.
  */
 interface UseSearchModalParams {
-    /**
-     * How the modal should be opened.
-     * Will default to "centered" if nothing else is specified.
-     * - "centered" - The modal will be opened in the center of the screen.
-     * - "aligned" - The modal will be opened aligned to the alignerRef element.
-     */
-    location?: ModalLocation;
-    /**
-     * The ref to the element that the modal should be aligned to.
-     * This is only used when location is "aligned".
-     * @default undefined
-     * @example
-     * ```tsx
-        import React from "react";
-        import { ComponentAligner, useSearchModal } from "@depict-ai/react-ui";
-  
-        const App = () => {
-          const ref = React.createRef();
-  
-          const { open } = useSearchModal({
-            location: "aligned",
-            alignerRef: ref,
-          });
-  
-          return (
-            <div>
-              <ComponentAligner ref={ref} />
-              <button onClick={open}>Open</button>
-            </div>
-          );
-        };
-     * ```
-     */
-    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;
+  /**
+   * How the modal should be opened.
+   * Will default to "centered" if nothing else is specified.
+   * - "centered" - The modal will be opened in the center of the screen.
+   * - "aligned" - The modal will be opened aligned to the alignerRef element.
+   */
+  location?: ModalLocation;
+  /**
+   * The ref to the element that the modal should be aligned to.
+   * This is only used when location is "aligned".
+   * @default undefined
+   * @example
+   * ```tsx
+      import React from "react";
+      import { ComponentAligner, useSearchModal } from "@depict-ai/react-ui";
+         const App = () => {
+        const ref = React.createRef();
+           const { open } = useSearchModal({
+          location: "aligned",
+          alignerRef: ref,
+        });
+           return (
+          <div>
+            <ComponentAligner ref={ref} />
+            <button onClick={open}>Open</button>
+          </div>
+        );
+      };
+   * ```
+   */
+  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;
 /**
@@ -369,7 +362,7 @@ type OpenModal = () => void;
  */
 type ModalLocation = "centered" | "aligned";
 interface UseSearchModalReturn {
-    open: OpenModal;
+  open: OpenModal;
 }
 /**
  * Hook used to open the search modal.
@@ -395,25 +388,25 @@ interface UseSearchModalReturn {
  */
 export function useSearchModal(params?: UseSearchModalParams): UseSearchModalReturn;
 interface SearchFieldProps {
-    /**
-     * A reference to the DOM element that the modal should be aligned to.
-     *
-     * The top of the modal will be aligned to the top of the element.
-     *
-     * The height of the search field in the modal will be the same as the height of the element.
-     * 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;
+  /**
+   * A reference to the DOM element that the modal should be aligned to.
+   *
+   * The top of the modal will be aligned to the top of the element.
+   *
+   * The height of the search field in the modal will be the same as the height of the element.
+   * 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 {
-    /**
-     * A React component that renders the search field.
-     */
-    SearchField: () => ReactElement;
+  /**
+   * A React component that renders the search field.
+   */
+  SearchField: () => ReactElement;
 }
 /**
  * Hook used to configure the Depict search field.
@@ -458,21 +451,21 @@ interface UseSearchFieldReturn {
 export const useSearchField: (props?: SearchFieldProps) => UseSearchFieldReturn;
 type FetchRecsOptions = Omit<Parameters<typeof fetchDepictRecommendations>[0], "merchant" | "market" | "userId" | "sessionId"> & ExclusiveId;
 interface UseFetchRecommendationsReturn<T extends Display> {
-    /**
-     * Fetch recommendations from the Depict API.
-     * @example
-     * General recommendations for a landing page:
-     * ```tsx
-     * fetchRecommendations({ type: "landing_page" });
-     * ```
-     * @example
-     * Fetch targeted recommendations for a product details page (PDP):
-     * ```tsx
-     * fetchRecommendations({ type: "related", productId: "t-shirt-white" })
-     * ```
-     * @returns {Promise<T[]>}
-     */
-    fetchRecommendations: (opts: FetchRecsOptions) => Promise<T[]>;
+  /**
+   * Fetch recommendations from the Depict API.
+   * @example
+   * General recommendations for a landing page:
+   * ```tsx
+   * fetchRecommendations({ type: "landing_page" });
+   * ```
+   * @example
+   * Fetch targeted recommendations for a product details page (PDP):
+   * ```tsx
+   * fetchRecommendations({ type: "related", productId: "t-shirt-white" })
+   * ```
+   * @returns {Promise<T[]>}
+   */
+  fetchRecommendations: (opts: FetchRecsOptions) => Promise<T[]>;
 }
 /**
  * Hook used to fetch Depict recommendations.
@@ -529,8 +522,8 @@ export function useFetchRecommendations<T extends Display>(): UseFetchRecommenda
  * Helper function to navigate to a new page depending on the navigation library used.
  */
 export const Navigation: {
-    nextRouterNavigation: (router: import("next/router").NextRouter) => import("ui/components/DepictProvider").NavigateFunction;
+  nextRouterNavigation: (router: import("next/router").NextRouter) => import("ui/components/DepictProvider").NavigateFunction;
 };
 export { CategoryTitle, embedded_num_products as EmbeddedNumProducts } from "@depict-ai/ui";
 export type { PageURLCreator } from "@depict-ai/ui";
-export type { Locale } from "@depict-ai/ui/locales";
+export type { Locale } from "@depict-ai/ui/locales";