@depict-ai/react-ui 0.0.67 → 0.0.68

package/dist/index.d.ts

@@ -3,7 +3,7 @@ import { Display } from "@depict-ai/utilishared";
 import React, { ReactNode, PropsWithChildren, ReactElement } from "react";
 import { Locale } from "@depict-ai/ui/locales";
 import { CategoryTitle, embedded_num_products } from "@depict-ai/ui";
-export const version = "0.0.67";
+export const version = "0.0.68";
 interface PLPConfig<T extends Display> {
     /**
      * The product card to use for rendering products.
@@ -37,7 +37,7 @@ export interface DepictProductCardProps<T extends Display> {
  * Depict product card to use for rendering products.
  */
 export type DepictProductCard<T extends Display> = (props: DepictProductCardProps<T>) => ReactNode;
-type NavigateFunction = (href: string) => void;
+type NavigateFunction = (relativeUrl: string) => void;
 type DepictSearchConfig = {
     /**
      * The path to the search page.
@@ -51,7 +51,7 @@ type DepictSearchConfig = {
      */
     urlParamName?: string;
     /**
-     * Whether or not to enable category suggestions in the search modal and search page.
+     * Whether to enable category suggestions in the search modal and search page.
      * @default false
      */
     enableCategorySuggestions?: boolean;
@@ -73,10 +73,14 @@ type DepictBaseConfig = {
      *
      * 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, using our helper function.
+     * 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();
@@ -84,7 +88,7 @@ type DepictBaseConfig = {
      *     <DepictProvider
      *       merchant="houdini"
      *       market="en-de"
-     *       navigateFunction={Navigation.reactRouterNavigation(navigate)}
+     *       navigateFunction={navigate}
      *       search={{
      *         searchPagePath: "/search",
      *       }}
@@ -97,7 +101,7 @@ type DepictBaseConfig = {
      * @example
      * If you're using another library, you can define your own navigate function, that's compatible with the `NavigateFunction` type.
      * ```tsx
-     * const navigateFunction = (href: string) => {
+     * const navigateFunction = (relativeUrl: string) => {
      *  router.push(href);
      * };
      * ```
@@ -328,10 +332,11 @@ export const TextPlaceholder: React.FC<TextPlaceholderProps>;
 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;
+    location?: ModalLocation;
     /**
      * The ref to the element that the modal should be aligned to.
      * This is only used when location is "aligned".
@@ -390,7 +395,7 @@ interface UseSearchModalReturn {
  * ```
  * @returns {JSX.Element}
  */
-export function useDepictSearchModal(params: UseSearchModalParams): UseSearchModalReturn;
+export function useDepictSearchModal(params?: UseSearchModalParams): UseSearchModalReturn;
 interface SearchFieldProps {
     /**
      * A reference to the DOM element that the modal should be aligned to.
@@ -453,8 +458,7 @@ export const useDepictSearchField: (props: SearchFieldProps) => UseDepictSearchF
  * Helper function to navigate to a new page depending on the navigation library used.
  */
 export const Navigation: {
-    nextRouterNavigation: (router: import("next/router").NextRouter) => (href: string) => void;
-    reactRouterNavigation: (navigateFunction: import("react-router").NavigateFunction) => (href: string) => void;
+    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";

package/dist/main.js

@@ -28,7 +28,7 @@ $parcel$export(module.exports, "Navigation", () => $b742053c966024b4$export$b8a6
 /*! 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 = "0.0.67";
+const $db7b67857900028b$export$83d89fbfd8236492 = "0.0.68";
 
 
 
@@ -174,9 +174,9 @@ async function $b4d0d98857ed9934$export$79c79419c1ef0081({ display: display , co
 }
 
 
-const $bc389476eeb2b615$export$599d4515591ef232 = (href)=>{
+const $bc389476eeb2b615$export$599d4515591ef232 = (relativeUrl)=>{
     const shallow = (0, $b4d0d98857ed9934$export$92a8f8b3c630fa0d)(location);
-    window.next.router.push(href, undefined, {
+    window.next.router.push(relativeUrl, undefined, {
         shallow: shallow,
         scroll: true
     });
@@ -195,10 +195,10 @@ function $24b00503eef73528$export$9fac37a9c21c2f3b(props) {
     try {
         const { search: search , category: category  } = (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e);
         const [get_search_page_path, set_search_page_path] = (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).search_page_path_;
-        set_search_page_path(searchPagePath);
-        const on_navigation = typeof window?.next?.router !== "undefined" || navigateFunction ? (new_href)=>{
-            if (navigateFunction) navigateFunction(new_href);
-            else (0, $bc389476eeb2b615$export$599d4515591ef232)(new_href);
+        set_search_page_path($24b00503eef73528$var$ensure_correct_formatting(searchPagePath));
+        const on_navigation = typeof window?.next?.router !== "undefined" || navigateFunction ? (new_relative_url)=>{
+            if (navigateFunction) navigateFunction(new_relative_url);
+            else (0, $bc389476eeb2b615$export$599d4515591ef232)(new_relative_url);
         } : undefined;
         if (!search) (0, $4GYXz$solidjs.createRoot)(()=>(0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).search = new (0, $4GYXz$depictaiui.DepictSearch)({
                 search_query_url_param_name: urlParamName,
@@ -236,6 +236,11 @@ function $24b00503eef73528$export$9fac37a9c21c2f3b(props) {
     }
     return (0, $4GYXz$react.createElement)((0, $4GYXz$react.Fragment), null, children);
 }
+function $24b00503eef73528$var$ensure_correct_formatting(path) {
+    // Make sure the path starts with a slash as it always will and is_page will fail otherwise
+    if (!path.startsWith("/")) return "/" + path;
+    return path;
+}
 
 
 
@@ -412,7 +417,7 @@ const $7c8b440edc188ad5$export$89c6019e4baa40b1 = ({ width: width , height: heig
 
 
 const $ef7db890e488d4f4$export$d69d8daa20eae175 = (createOpenModalParams)=>{
-    const { globalState: globalState , location: location , alignerRef: alignerRef  } = createOpenModalParams;
+    const { globalState: globalState , location: location = "centered" , alignerRef: alignerRef  } = createOpenModalParams;
     const openModal = ()=>{
         const headerAligner = alignerRef?.current;
         if (!globalState.search) throw new Error("No active search in the app!");
@@ -449,7 +454,7 @@ const $ef7db890e488d4f4$export$d69d8daa20eae175 = (createOpenModalParams)=>{
 };
 
 
-function $3647cad61d03b89c$export$cc1e9aaf280afdcb(params) {
+function $3647cad61d03b89c$export$cc1e9aaf280afdcb(params = {}) {
     const open = (0, $ef7db890e488d4f4$export$d69d8daa20eae175)({
         globalState: $0b7cd4fb39fc3502$export$8e769ad4338a911e,
         ...params
@@ -488,33 +493,17 @@ const $ca5840628781f899$export$45080d603eda647c = (props)=>{
 
 
 
-const $e387bd534de10acd$export$804fac5697cfbe35 = (router)=>(href)=>{
+const $e387bd534de10acd$export$804fac5697cfbe35 = (router)=>(relativeUrl)=>{
         const shallow = (0, $b4d0d98857ed9934$export$92a8f8b3c630fa0d)(location);
-        router.push(href, undefined, {
+        router.push(relativeUrl, undefined, {
             shallow: shallow,
             scroll: true
         });
     };
 
 
-/**
- * Helper function that creates a function that can be used as the
- * navigateFunction callback for DepictProvider when using react-router.
- *
- * React-router expect relative URLs, so this function will strip the
- * protocol, hostname and port from the URL.
- *
- * @param navigateFunction what useNavigate() returns
- * @returns a function that can be used as the navigateFunction callback for DepictProvider
- */ const $201a023b63de7d2f$export$d53481656a62aebe = (navigateFunction)=>(href)=>{
-        const url_object = new URL(href);
-        return navigateFunction(url_object.pathname + url_object.search + url_object.hash);
-    };
-
-
 const $b742053c966024b4$export$b8a61e5c71402559 = {
-    nextRouterNavigation: $e387bd534de10acd$export$804fac5697cfbe35,
-    reactRouterNavigation: $201a023b63de7d2f$export$d53481656a62aebe
+    nextRouterNavigation: $e387bd534de10acd$export$804fac5697cfbe35
 };
 
 

package/dist/module.js

@@ -10,7 +10,7 @@ import {createPortal as $TZSbU$createPortal} from "react-dom";
 /*! 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 = "0.0.67";
+const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "0.0.68";
 
 
 
@@ -156,9 +156,9 @@ async function $c83ba9ab79386687$export$79c79419c1ef0081({ display: display , co
 }
 
 
-const $7216ca4c8308a0f9$export$599d4515591ef232 = (href)=>{
+const $7216ca4c8308a0f9$export$599d4515591ef232 = (relativeUrl)=>{
     const shallow = (0, $c83ba9ab79386687$export$92a8f8b3c630fa0d)(location);
-    window.next.router.push(href, undefined, {
+    window.next.router.push(relativeUrl, undefined, {
         shallow: shallow,
         scroll: true
     });
@@ -177,10 +177,10 @@ function $5376eb2a386cd90d$export$9fac37a9c21c2f3b(props) {
     try {
         const { search: search , category: category  } = (0, $42858f023ef23dab$export$8e769ad4338a911e);
         const [get_search_page_path, set_search_page_path] = (0, $42858f023ef23dab$export$8e769ad4338a911e).search_page_path_;
-        set_search_page_path(searchPagePath);
-        const on_navigation = typeof window?.next?.router !== "undefined" || navigateFunction ? (new_href)=>{
-            if (navigateFunction) navigateFunction(new_href);
-            else (0, $7216ca4c8308a0f9$export$599d4515591ef232)(new_href);
+        set_search_page_path($5376eb2a386cd90d$var$ensure_correct_formatting(searchPagePath));
+        const on_navigation = typeof window?.next?.router !== "undefined" || navigateFunction ? (new_relative_url)=>{
+            if (navigateFunction) navigateFunction(new_relative_url);
+            else (0, $7216ca4c8308a0f9$export$599d4515591ef232)(new_relative_url);
         } : undefined;
         if (!search) (0, $TZSbU$createRoot)(()=>(0, $42858f023ef23dab$export$8e769ad4338a911e).search = new (0, $TZSbU$DepictSearch)({
                 search_query_url_param_name: urlParamName,
@@ -218,6 +218,11 @@ function $5376eb2a386cd90d$export$9fac37a9c21c2f3b(props) {
     }
     return (0, $TZSbU$createElement)((0, $TZSbU$Fragment), null, children);
 }
+function $5376eb2a386cd90d$var$ensure_correct_formatting(path) {
+    // Make sure the path starts with a slash as it always will and is_page will fail otherwise
+    if (!path.startsWith("/")) return "/" + path;
+    return path;
+}
 
 
 
@@ -394,7 +399,7 @@ const $cbd250061abf11cb$export$89c6019e4baa40b1 = ({ width: width , height: heig
 
 
 const $5e26376d86621891$export$d69d8daa20eae175 = (createOpenModalParams)=>{
-    const { globalState: globalState , location: location , alignerRef: alignerRef  } = createOpenModalParams;
+    const { globalState: globalState , location: location = "centered" , alignerRef: alignerRef  } = createOpenModalParams;
     const openModal = ()=>{
         const headerAligner = alignerRef?.current;
         if (!globalState.search) throw new Error("No active search in the app!");
@@ -431,7 +436,7 @@ const $5e26376d86621891$export$d69d8daa20eae175 = (createOpenModalParams)=>{
 };
 
 
-function $cfa72c75e6cf6901$export$cc1e9aaf280afdcb(params) {
+function $cfa72c75e6cf6901$export$cc1e9aaf280afdcb(params = {}) {
     const open = (0, $5e26376d86621891$export$d69d8daa20eae175)({
         globalState: $42858f023ef23dab$export$8e769ad4338a911e,
         ...params
@@ -470,33 +475,17 @@ const $e3ccaca62718bae4$export$45080d603eda647c = (props)=>{
 
 
 
-const $a92aa2beb560b8af$export$804fac5697cfbe35 = (router)=>(href)=>{
+const $a92aa2beb560b8af$export$804fac5697cfbe35 = (router)=>(relativeUrl)=>{
         const shallow = (0, $c83ba9ab79386687$export$92a8f8b3c630fa0d)(location);
-        router.push(href, undefined, {
+        router.push(relativeUrl, undefined, {
             shallow: shallow,
             scroll: true
         });
     };
 
 
-/**
- * Helper function that creates a function that can be used as the
- * navigateFunction callback for DepictProvider when using react-router.
- *
- * React-router expect relative URLs, so this function will strip the
- * protocol, hostname and port from the URL.
- *
- * @param navigateFunction what useNavigate() returns
- * @returns a function that can be used as the navigateFunction callback for DepictProvider
- */ const $01e1970add53d62a$export$d53481656a62aebe = (navigateFunction)=>(href)=>{
-        const url_object = new URL(href);
-        return navigateFunction(url_object.pathname + url_object.search + url_object.hash);
-    };
-
-
 const $97603d19204ec48d$export$b8a61e5c71402559 = {
-    nextRouterNavigation: $a92aa2beb560b8af$export$804fac5697cfbe35,
-    reactRouterNavigation: $01e1970add53d62a$export$d53481656a62aebe
+    nextRouterNavigation: $a92aa2beb560b8af$export$804fac5697cfbe35
 };
 
 

package/dist-server/index.d.ts

@@ -9,7 +9,7 @@ interface UseDepictSearchFieldReturn {
      */
     DepictSearchField: () => ReactElement;
 }
-export const version = "0.0.67";
+export const version = "0.0.68";
 export function DepictProvider(props: any): any;
 export function DepictSearchPage(): any;
 export function DepictCategoryPage(): any;

package/dist-server/main.js

@@ -19,7 +19,7 @@ $parcel$export(module.exports, "useDepictSearchModal", () => $41e7e5d85b5e0d49$e
 $parcel$export(module.exports, "version", () => $db7b67857900028b$export$83d89fbfd8236492);
 
 
-const $db7b67857900028b$export$83d89fbfd8236492 = "0.0.67";
+const $db7b67857900028b$export$83d89fbfd8236492 = "0.0.68";
 
 
 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 = "0.0.67";
+const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "0.0.68";
 
 
 function $2b1fdeb83610500f$export$9fac37a9c21c2f3b(props) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depict-ai/react-ui",
-  "version": "0.0.67",
+  "version": "0.0.68",
   "packageManager": "yarn@3.2.2",
   "source": "src/index.ts",
   "main": "dist/main.js",
@@ -90,8 +90,8 @@
     "/locales"
   ],
   "dependencies": {
-    "@depict-ai/ui": "^0.0.44",
-    "@depict-ai/utilishared": "^0.0.42",
+    "@depict-ai/ui": "^0.0.45",
+    "@depict-ai/utilishared": "^0.0.43",
     "solid-js": "^1.6.2"
   },
   "peerDependencies": {
@@ -104,7 +104,7 @@
     "@babel/preset-typescript": "latest",
     "@babel/runtime": "latest",
     "@babel/runtime-corejs3": "latest",
-    "@depict-ai/plp-styling": "^0.0.7",
+    "@depict-ai/plp-styling": "^0.0.8",
     "@jest/globals": "^29.3.1",
     "@parcel/babel-preset-env": "latest",
     "@parcel/resolver-default": "^2.8.0",