@depict-ai/react-ui 1.0.12 → 1.0.14

package/README.md

@@ -1,3 +1,3 @@
-# React flavour of the Depict UI
-
+# React flavour of the Depict UI
+
 See the [documentation](https://docs.depict.ai/docs/sdk-intro).

package/dist/index.d.ts

@@ -1,489 +1,489 @@
-import { BaseProductListingConfig, BaseProviderConfig, BaseSearchProviderConfig, BaseSearchPageConfig, BaseCategoryPageConfig, CategoryTitle, embedded_num_products, ImagePlaceholderProps, TextPlaceholderProps, fetchDepictRecommendations, ExclusiveId } from "@depict-ai/ui";
-import { Display } 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.0.12";
-interface PLPConfig<T extends Display> extends BaseProductListingConfig {
-    /**
-     * 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;
-}
-/**
- * Depict product card to use for rendering products.
- */
-export type DepictProductCard<T extends Display> = (props: DepictProductCardProps<T>) => ReactNode;
-interface UsePerformanceClientReturn {
-    dpc: DPC;
-}
-/**
- * Hook used to access the Depict Performance Client.
- * Calls on the returned DPC instance can not be done server side.
- * @example
- * Send an add-to-cart event
- * ```tsx
- * import { useEffect } from "react";
- * import { usePerformanceClient } from "@depict-ai/react-ui";
- *
- * const ProductPage = ({ productId }) => {
- *   const { dpc } = usePerformanceClient();
- *
- *   useEffect(() => {
- *     dpc.setProductId(productId);
- *   }, [dpc, productId]);
- *
- *   return <div>Showing product {productId}</div>;
- * }
- * ```
- * @returns {UsePerformanceClientReturn}
-}
- */
-export const usePerformanceClient: () => UsePerformanceClientReturn;
-/**
- * relativeUrl: The relative url to navigate to.
- * replace: Whether to replace the current url or push a new one.
- */
-type NavigateFunction = (relativeUrl: string, options: {
-    replace: boolean;
-}) => void;
-/**
- * The config for the DepictProvider.
- */
-type ProviderConfig = BaseProviderConfig & {
-    /**
-     * 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) => {
-     *  router.push(relativeUrl);
-     * };
-     * ```
-     */
-    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.
- *
- * Make sure it's mounted on every page where the search modal should be available.
- *
- * @param props -  The props for the DepictProvider.
- *
- * @example
- * ```tsx
- *  const App = () => { *
- *    return (
- *      <DepictProvider
- *        merchant="YOUR_MERCHANT"
- *        market="YOUR_MARKET"
- *        search={{
- *          searchPagePath: "/search",
- *        }}
- *      >
- *        <App />
- *      </DepictProvider>
- *    );
- * };
- * ```
- * @returns {JSX.Element} The DepictProvider.
- */
-export function DepictProvider(props: PropsWithChildren<ProviderConfig>): import("react").FunctionComponentElement<{
-    children?: import("react").ReactNode;
-}>;
-/**
- * A component used to align other Depict components to.
- * @example
- * Align the search modal
- * ```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>
- *   );
- * };
- * ```
- * @returns {JSX.Element}
- */
-export const ComponentAligner: import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>>;
-interface SearchPageConfig<T extends Display> extends BaseSearchPageConfig, PLPConfig<T> {
-}
-/**
- * SearchPage is a component that renders a Depict search results page.
- * @param props - The props for the search page.
- *
- * @example
- * ```tsx
- * import { DepictProductCard, ImagePlaceholder, Display, SearchPage } from '@depict-ai/react-ui'
- *
- * function Search() {
- *    return <SearchPage productCard={MyCustomSearchProductCard} />
- * }
- *
- * interface MyCustomDisplay extends Display {}
- *
- * export const MyCustomSearchProductCard: DepictProductCard<MyCustomDisplay> = ({
- *   display,
- * }) => {
- *   if (!display) {
- *     return <ImagePlaceholder aspectRatio={3 / 4} />
- *   }
- *
- *   return (
- *     <>
- *       <MyCustomProductCard
- *         product={{
- *           id: display.product_id,
- *           name: display.title,
- *           description: display.title,
- *           images: [{ url: display.image_url }],
- *           price: {
- *             value: display.sale_price,
- *           },
- *         }}
- *       />
- *     </>
- *   )
- * }
- *
- * ```
- */
-export function SearchPage<T extends Display>(props: SearchPageConfig<T>): 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={CategoryTitle} />
-     * ```
-     */
-    categoryTitlePlugin?: typeof CategoryTitle | typeof embedded_num_products;
-}
-/**
- * CategoryPage is a component that renders a Depict category page.
- * @param props the props for the category page.
- *
- * @example
- * ```tsx
- * import { DepictProductCard, ImagePlaceholder, Display, CategoryPage } from '@depict-ai/react-ui'
- *
- * function Category() {
- *  return <CategoryPage categoryId="jeans" productCard={MyCustomCategoryProductCard} />
- * }
- *
- * interface MyCustomDisplay extends Display {}
- *
- * export const MyCustomCategoryProductCard: DepictProductCard<MyCustomDisplay> = ({
- *   display,
- * }) => {
- *   if (!display) {
- *     return <ImagePlaceholder aspectRatio={3 / 4} />
- *   }
- *
- *   return (
- *     <>
- *       <MyCustomProductCard
- *         product={{
- *           id: display.product_id,
- *           name: display.title,
- *           description: display.title,
- *           images: [{ url: display.image_url }],
- *           price: {
- *             value: display.sale_price,
- *           },
- *         }}
- *       />
- *     </>
- *   )
- * }
- * ```
- */
-export function CategoryPage<T extends Display>(props: CategoryPageConfig<T>): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-/**
- * BreadCrumbs is the "trail" in the header of a category page.
- */
-export function BreadCrumbs(): 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.
- */
-export function QuickLinks(): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-/**
- * A placeholder image that can be used in place of an image that is loading.
- * @param props
- * @returns
- */
-export const ImagePlaceholder: React.FC<ImagePlaceholderProps>;
-/** A placeholder text that can be used in place of a text that is loading. */
-export const TextPlaceholder: React.FC<TextPlaceholderProps>;
-/**
- * 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>;
-}
-type OpenModal = () => void;
-/**
- * How the modal should be opened.
- */
-type ModalLocation = "centered" | "aligned";
-interface UseSearchModalReturn {
-    open: OpenModal;
-}
-/**
- * Hook used to open the search modal.
- * @example
- * Open a centered modal:
- * ```tsx
- * import React from "react";
- * import { useSearchModal } from "@depict-ai/react-ui";
- *
- * const App = () => {
- *   const { open } = useSearchModal({
- *     location: "centered",
- *   });
- *
- *   return (
- *     <div>
- *       <button onClick={open}>Open</button>
- *     </div>
- *   );
- * };
- * ```
- * @returns {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>;
-}
-interface UseSearchFieldReturn {
-    /**
-     * A React component that renders the search field.
-     */
-    SearchField: () => ReactElement;
-}
-/**
- * Hook used to configure the Depict search field.
- * @example
- * Render a search field that opens a modal aligned to the search field itself:
- * ```tsx
- * import React from "react";
- * import { useSearchField } from "@depict-ai/react-ui";
- *
- * const App = () => {
- *   const { SearchField } = useSearchField();
- *
- *   return (
- *     <div>
- *       <SearchField />
- *     </div>
- *   );
- * };
- * ```
- * @example
- * Render a search field that opens a modal aligned another DOM element:
- * ```tsx
- * import React from "react";
- * import { ComponentAligner, useSearchField } from "@depict-ai/react-ui";
- *
- * const App = () => {
- *   const ref = useRef(null);
- *   const { SearchField } = useSearchField({
- *     alignerRef: ref
- *   });
- *
- *   return (
- *     <div>
- *       <ComponentAligner ref={ref} />
- *       <SearchField />
- *     </div>
- *   );
- * };
- * ```
- * @returns {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[]>;
-}
-/**
- * Hook used to fetch Depict recommendations.
- * @example
- * Fetch general recommendations for a landing page:
- * ```tsx
- * import React from "react";
- * import { useFetchRecommendations } from "@depict-ai/react-ui";
- *
- * export const LandingPage = () => {
- *   const [recs, setRecs] = React.useState();
- *   const { fetchRecommendations } = useFetchRecommendations();
- *
- *   React.useEffect(() => {
- *     fetchRecommendations({ type: "landing_page" }).then(setRecs);
- *   }, [fetchRecommendations]);
- *
- *   return (
- *     <div>
- *      {recs?.map((display) => (
- *        <ProductCard display={display} />
- *      ))}
- *     </div>
- *   );
- * };
- * ```
- * @example
- * Fetch targeted recommendations for a product details page (PDP):
- * ```tsx
- * import React from "react";
- * import { useFetchRecommendations } from "@depict-ai/react-ui";
- *
- * export const ProductPage = ({ productId }) => {
- *   const [recs, setRecs] = React.useState();
- *   const { fetchRecommendations } = useFetchRecommendations();
- *
- *   React.useEffect(() => {
- *     fetchRecommendations({ type: "related", productId }).then(setRecs);
- *   }, [fetchRecommendations, productId]);
- *
- *   return (
- *     <div>
- *      {recs?.map((display) => (
- *        <ProductCard display={display} />
- *      ))}
- *     </div>
- *   );
- * };
- * ```
- * @returns {UseFetchRecommendationsReturn}
- */
-export function useFetchRecommendations<T extends Display>(): UseFetchRecommendationsReturn<T>;
-/**
- * Helper function to navigate to a new page depending on the navigation library used.
- */
-export const Navigation: {
-    nextRouterNavigation: (router: import("next/router").NextRouter) => (relativeUrl: string) => void;
-};
-export { CategoryTitle, embedded_num_products as EmbeddedNumProducts } from "@depict-ai/ui";
-export type { Locale } from "@depict-ai/ui/locales";
+import { BaseProductListingConfig, BaseProviderConfig, BaseSearchProviderConfig, BaseSearchPageConfig, BaseCategoryPageConfig, CategoryTitle, embedded_num_products, ImagePlaceholderProps, TextPlaceholderProps, fetchDepictRecommendations, ExclusiveId } from "@depict-ai/ui";
+import { Display } 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.0.14";
+interface PLPConfig<T extends Display> extends BaseProductListingConfig {
+    /**
+     * 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;
+}
+/**
+ * Depict product card to use for rendering products.
+ */
+export type DepictProductCard<T extends Display> = (props: DepictProductCardProps<T>) => ReactNode;
+interface UsePerformanceClientReturn {
+    dpc: DPC;
+}
+/**
+ * Hook used to access the Depict Performance Client.
+ * Calls on the returned DPC instance can not be done server side.
+ * @example
+ * Send an add-to-cart event
+ * ```tsx
+ * import { useEffect } from "react";
+ * import { usePerformanceClient } from "@depict-ai/react-ui";
+ *
+ * const ProductPage = ({ productId }) => {
+ *   const { dpc } = usePerformanceClient();
+ *
+ *   useEffect(() => {
+ *     dpc.setProductId(productId);
+ *   }, [dpc, productId]);
+ *
+ *   return <div>Showing product {productId}</div>;
+ * }
+ * ```
+ * @returns {UsePerformanceClientReturn}
+}
+ */
+export const usePerformanceClient: () => UsePerformanceClientReturn;
+/**
+ * relativeUrl: The relative url to navigate to.
+ * replace: Whether to replace the current url or push a new one.
+ */
+type NavigateFunction = (relativeUrl: string, options: {
+    replace: boolean;
+}) => void;
+/**
+ * The config for the DepictProvider.
+ */
+type ProviderConfig = BaseProviderConfig & {
+    /**
+     * 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) => {
+     *  router.push(relativeUrl);
+     * };
+     * ```
+     */
+    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.
+ *
+ * Make sure it's mounted on every page where the search modal should be available.
+ *
+ * @param props -  The props for the DepictProvider.
+ *
+ * @example
+ * ```tsx
+ *  const App = () => { *
+ *    return (
+ *      <DepictProvider
+ *        merchant="YOUR_MERCHANT"
+ *        market="YOUR_MARKET"
+ *        search={{
+ *          searchPagePath: "/search",
+ *        }}
+ *      >
+ *        <App />
+ *      </DepictProvider>
+ *    );
+ * };
+ * ```
+ * @returns {JSX.Element} The DepictProvider.
+ */
+export function DepictProvider(props: PropsWithChildren<ProviderConfig>): import("react").FunctionComponentElement<{
+    children?: import("react").ReactNode;
+}>;
+/**
+ * A component used to align other Depict components to.
+ * @example
+ * Align the search modal
+ * ```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>
+ *   );
+ * };
+ * ```
+ * @returns {JSX.Element}
+ */
+export const ComponentAligner: import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>>;
+interface SearchPageConfig<T extends Display> extends BaseSearchPageConfig, PLPConfig<T> {
+}
+/**
+ * SearchPage is a component that renders a Depict search results page.
+ * @param props - The props for the search page.
+ *
+ * @example
+ * ```tsx
+ * import { DepictProductCard, ImagePlaceholder, Display, SearchPage } from '@depict-ai/react-ui'
+ *
+ * function Search() {
+ *    return <SearchPage productCard={MyCustomSearchProductCard} />
+ * }
+ *
+ * interface MyCustomDisplay extends Display {}
+ *
+ * export const MyCustomSearchProductCard: DepictProductCard<MyCustomDisplay> = ({
+ *   display,
+ * }) => {
+ *   if (!display) {
+ *     return <ImagePlaceholder aspectRatio={3 / 4} />
+ *   }
+ *
+ *   return (
+ *     <>
+ *       <MyCustomProductCard
+ *         product={{
+ *           id: display.product_id,
+ *           name: display.title,
+ *           description: display.title,
+ *           images: [{ url: display.image_url }],
+ *           price: {
+ *             value: display.sale_price,
+ *           },
+ *         }}
+ *       />
+ *     </>
+ *   )
+ * }
+ *
+ * ```
+ */
+export function SearchPage<T extends Display>(props: SearchPageConfig<T>): 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={CategoryTitle} />
+     * ```
+     */
+    categoryTitlePlugin?: typeof CategoryTitle | typeof embedded_num_products;
+}
+/**
+ * CategoryPage is a component that renders a Depict category page.
+ * @param props the props for the category page.
+ *
+ * @example
+ * ```tsx
+ * import { DepictProductCard, ImagePlaceholder, Display, CategoryPage } from '@depict-ai/react-ui'
+ *
+ * function Category() {
+ *  return <CategoryPage categoryId="jeans" productCard={MyCustomCategoryProductCard} />
+ * }
+ *
+ * interface MyCustomDisplay extends Display {}
+ *
+ * export const MyCustomCategoryProductCard: DepictProductCard<MyCustomDisplay> = ({
+ *   display,
+ * }) => {
+ *   if (!display) {
+ *     return <ImagePlaceholder aspectRatio={3 / 4} />
+ *   }
+ *
+ *   return (
+ *     <>
+ *       <MyCustomProductCard
+ *         product={{
+ *           id: display.product_id,
+ *           name: display.title,
+ *           description: display.title,
+ *           images: [{ url: display.image_url }],
+ *           price: {
+ *             value: display.sale_price,
+ *           },
+ *         }}
+ *       />
+ *     </>
+ *   )
+ * }
+ * ```
+ */
+export function CategoryPage<T extends Display>(props: CategoryPageConfig<T>): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+/**
+ * BreadCrumbs is the "trail" in the header of a category page.
+ */
+export function BreadCrumbs(): 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.
+ */
+export function QuickLinks(): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+/**
+ * A placeholder image that can be used in place of an image that is loading.
+ * @param props
+ * @returns
+ */
+export const ImagePlaceholder: React.FC<ImagePlaceholderProps>;
+/** A placeholder text that can be used in place of a text that is loading. */
+export const TextPlaceholder: React.FC<TextPlaceholderProps>;
+/**
+ * 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>;
+}
+type OpenModal = () => void;
+/**
+ * How the modal should be opened.
+ */
+type ModalLocation = "centered" | "aligned";
+interface UseSearchModalReturn {
+    open: OpenModal;
+}
+/**
+ * Hook used to open the search modal.
+ * @example
+ * Open a centered modal:
+ * ```tsx
+ * import React from "react";
+ * import { useSearchModal } from "@depict-ai/react-ui";
+ *
+ * const App = () => {
+ *   const { open } = useSearchModal({
+ *     location: "centered",
+ *   });
+ *
+ *   return (
+ *     <div>
+ *       <button onClick={open}>Open</button>
+ *     </div>
+ *   );
+ * };
+ * ```
+ * @returns {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>;
+}
+interface UseSearchFieldReturn {
+    /**
+     * A React component that renders the search field.
+     */
+    SearchField: () => ReactElement;
+}
+/**
+ * Hook used to configure the Depict search field.
+ * @example
+ * Render a search field that opens a modal aligned to the search field itself:
+ * ```tsx
+ * import React from "react";
+ * import { useSearchField } from "@depict-ai/react-ui";
+ *
+ * const App = () => {
+ *   const { SearchField } = useSearchField();
+ *
+ *   return (
+ *     <div>
+ *       <SearchField />
+ *     </div>
+ *   );
+ * };
+ * ```
+ * @example
+ * Render a search field that opens a modal aligned another DOM element:
+ * ```tsx
+ * import React from "react";
+ * import { ComponentAligner, useSearchField } from "@depict-ai/react-ui";
+ *
+ * const App = () => {
+ *   const ref = useRef(null);
+ *   const { SearchField } = useSearchField({
+ *     alignerRef: ref
+ *   });
+ *
+ *   return (
+ *     <div>
+ *       <ComponentAligner ref={ref} />
+ *       <SearchField />
+ *     </div>
+ *   );
+ * };
+ * ```
+ * @returns {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[]>;
+}
+/**
+ * Hook used to fetch Depict recommendations.
+ * @example
+ * Fetch general recommendations for a landing page:
+ * ```tsx
+ * import React from "react";
+ * import { useFetchRecommendations } from "@depict-ai/react-ui";
+ *
+ * export const LandingPage = () => {
+ *   const [recs, setRecs] = React.useState();
+ *   const { fetchRecommendations } = useFetchRecommendations();
+ *
+ *   React.useEffect(() => {
+ *     fetchRecommendations({ type: "landing_page" }).then(setRecs);
+ *   }, [fetchRecommendations]);
+ *
+ *   return (
+ *     <div>
+ *      {recs?.map((display) => (
+ *        <ProductCard display={display} />
+ *      ))}
+ *     </div>
+ *   );
+ * };
+ * ```
+ * @example
+ * Fetch targeted recommendations for a product details page (PDP):
+ * ```tsx
+ * import React from "react";
+ * import { useFetchRecommendations } from "@depict-ai/react-ui";
+ *
+ * export const ProductPage = ({ productId }) => {
+ *   const [recs, setRecs] = React.useState();
+ *   const { fetchRecommendations } = useFetchRecommendations();
+ *
+ *   React.useEffect(() => {
+ *     fetchRecommendations({ type: "related", productId }).then(setRecs);
+ *   }, [fetchRecommendations, productId]);
+ *
+ *   return (
+ *     <div>
+ *      {recs?.map((display) => (
+ *        <ProductCard display={display} />
+ *      ))}
+ *     </div>
+ *   );
+ * };
+ * ```
+ * @returns {UseFetchRecommendationsReturn}
+ */
+export function useFetchRecommendations<T extends Display>(): UseFetchRecommendationsReturn<T>;
+/**
+ * Helper function to navigate to a new page depending on the navigation library used.
+ */
+export const Navigation: {
+    nextRouterNavigation: (router: import("next/router").NextRouter) => (relativeUrl: string) => void;
+};
+export { CategoryTitle, embedded_num_products as EmbeddedNumProducts } from "@depict-ai/ui";
+export type { Locale } from "@depict-ai/ui/locales";

package/dist/main.js

@@ -31,7 +31,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 = "1.0.12";
+const $db7b67857900028b$export$83d89fbfd8236492 = "1.0.14";
 
 
 
@@ -235,9 +235,9 @@ function $6319748b4f0426f0$export$6453cbc34515a94d() {
         });
     }));
 }
-/*
- Here we want to be able to add padding that *definitely* gets applied and then be able to revert precisely to what was before.
- The best way to achieve this is using an animation that with the fill set to none. This is because animations have the absolute highest precedence in CSS, even higher than !important. Then, to revert to the old padding, we just play the animation which is 1ms long so, it immediately finishes and whatever was defined before takes precedence again.
+/*
+ Here we want to be able to add padding that *definitely* gets applied and then be able to revert precisely to what was before.
+ The best way to achieve this is using an animation that with the fill set to none. This is because animations have the absolute highest precedence in CSS, even higher than !important. Then, to revert to the old padding, we just play the animation which is 1ms long so, it immediately finishes and whatever was defined before takes precedence again.
  */ function $6319748b4f0426f0$var$addLotsOfPadding() {
     if ($6319748b4f0426f0$var$padding_animation) return; // We're already showing a bunch of padding
     $6319748b4f0426f0$var$padding_animation = document.body.animate({

package/dist/module.js

@@ -11,7 +11,7 @@ import {DPC as $TZSbU$DPC} from "@depict-ai/dpc";
 
 /*! 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 $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "1.0.12";
+const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "1.0.14";
 
 
 
@@ -215,9 +215,9 @@ function $8071251ee4e9ffa1$export$6453cbc34515a94d() {
         });
     }));
 }
-/*
- Here we want to be able to add padding that *definitely* gets applied and then be able to revert precisely to what was before.
- The best way to achieve this is using an animation that with the fill set to none. This is because animations have the absolute highest precedence in CSS, even higher than !important. Then, to revert to the old padding, we just play the animation which is 1ms long so, it immediately finishes and whatever was defined before takes precedence again.
+/*
+ Here we want to be able to add padding that *definitely* gets applied and then be able to revert precisely to what was before.
+ The best way to achieve this is using an animation that with the fill set to none. This is because animations have the absolute highest precedence in CSS, even higher than !important. Then, to revert to the old padding, we just play the animation which is 1ms long so, it immediately finishes and whatever was defined before takes precedence again.
  */ function $8071251ee4e9ffa1$var$addLotsOfPadding() {
     if ($8071251ee4e9ffa1$var$padding_animation) return; // We're already showing a bunch of padding
     $8071251ee4e9ffa1$var$padding_animation = document.body.animate({

package/dist-server/index.d.ts

@@ -1,54 +1,54 @@
-import { ReactElement } from "react";
-import { DPC } from "@depict-ai/dpc";
-import { fetchDepictRecommendations, ExclusiveId } from "@depict-ai/ui";
-import { Display } from "@depict-ai/utilishared";
-type OpenModal = () => void;
-interface UseSearchModalReturn {
-    open: OpenModal;
-}
-interface UseSearchFieldReturn {
-    /**
-     * A React component that renders the search field.
-     */
-    SearchField: () => ReactElement;
-}
-interface UsePerformanceClientReturn {
-    dpc: DPC;
-}
-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[]>;
-}
-export const version = "1.0.12";
-export function DepictProvider(props: any): any;
-export function SearchPage(): any;
-export function CategoryPage(): any;
-export function BreadCrumbs(): any;
-export function QuickLinks(): any;
-export function ComponentAligner(): import("react").DetailedReactHTMLElement<{
-    className: string;
-    style: {
-        height: string;
-    };
-}, HTMLElement>;
-export function ImagePlaceholder(): any;
-export function TextPlaceholder(): any;
-export function useSearchField(): UseSearchFieldReturn;
-export function openModal(): void;
-export function useSearchModal(): UseSearchModalReturn;
-export function usePerformanceClient(): UsePerformanceClientReturn;
-export function useFetchRecommendations<T extends Display>(): UseFetchRecommendationsReturn<T>;
+import { ReactElement } from "react";
+import { DPC } from "@depict-ai/dpc";
+import { fetchDepictRecommendations, ExclusiveId } from "@depict-ai/ui";
+import { Display } from "@depict-ai/utilishared";
+type OpenModal = () => void;
+interface UseSearchModalReturn {
+    open: OpenModal;
+}
+interface UseSearchFieldReturn {
+    /**
+     * A React component that renders the search field.
+     */
+    SearchField: () => ReactElement;
+}
+interface UsePerformanceClientReturn {
+    dpc: DPC;
+}
+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[]>;
+}
+export const version = "1.0.14";
+export function DepictProvider(props: any): any;
+export function SearchPage(): any;
+export function CategoryPage(): any;
+export function BreadCrumbs(): any;
+export function QuickLinks(): any;
+export function ComponentAligner(): import("react").DetailedReactHTMLElement<{
+    className: string;
+    style: {
+        height: string;
+    };
+}, HTMLElement>;
+export function ImagePlaceholder(): any;
+export function TextPlaceholder(): any;
+export function useSearchField(): UseSearchFieldReturn;
+export function openModal(): void;
+export function useSearchModal(): UseSearchModalReturn;
+export function usePerformanceClient(): UsePerformanceClientReturn;
+export function useFetchRecommendations<T extends Display>(): UseFetchRecommendationsReturn<T>;

package/dist-server/main.js

@@ -21,7 +21,7 @@ $parcel$export(module.exports, "useFetchRecommendations", () => $41e7e5d85b5e0d4
 $parcel$export(module.exports, "version", () => $db7b67857900028b$export$83d89fbfd8236492);
 
 
-const $db7b67857900028b$export$83d89fbfd8236492 = "1.0.12";
+const $db7b67857900028b$export$83d89fbfd8236492 = "1.0.14";
 
 
 function $41e7e5d85b5e0d49$export$9fac37a9c21c2f3b(props) {

package/dist-server/module.js

@@ -3,7 +3,7 @@ import {jsx as $1RlIW$jsx} from "react/jsx-runtime";
 
 
 
-const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "1.0.12";
+const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "1.0.14";
 
 
 function $2b1fdeb83610500f$export$9fac37a9c21c2f3b(props) {

package/locales/index.d.ts

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

package/locales/index.js

@@ -1 +1 @@
-export * from "@depict-ai/ui/locales";
+export * from "@depict-ai/ui/locales";

package/locales/require.js

@@ -1 +1 @@
-module.exports = require("@depict-ai/ui/locales");
+module.exports = require("@depict-ai/ui/locales");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depict-ai/react-ui",
-  "version": "1.0.12",
+  "version": "1.0.14",
   "packageManager": "yarn@3.2.2",
   "source": "src/index.ts",
   "main": "dist/main.js",
@@ -97,10 +97,10 @@
     "README.md"
   ],
   "dependencies": {
-    "@depict-ai/dpc": "^1.0.12",
-    "@depict-ai/plp-styling": "^1.0.13",
-    "@depict-ai/ui": "^1.0.15",
-    "@depict-ai/utilishared": "^1.0.12",
+    "@depict-ai/dpc": "^1.0.14",
+    "@depict-ai/plp-styling": "^1.0.15",
+    "@depict-ai/ui": "^1.0.17",
+    "@depict-ai/utilishared": "^1.0.14",
     "solid-js": "^1.7.3"
   },
   "peerDependencies": {
@@ -114,7 +114,7 @@
     "@babel/preset-typescript": "latest",
     "@babel/runtime": "latest",
     "@babel/runtime-corejs3": "latest",
-    "@depict-ai/plp-styling": "^1.0.13",
+    "@depict-ai/plp-styling": "^1.0.15",
     "@jest/globals": "^29.3.1",
     "@parcel/babel-preset-env": "latest",
     "@parcel/resolver-default": "^2.8.0",