@depict-ai/react-ui 1.0.1 → 1.0.4

package/dist/index.d.ts

@@ -3,7 +3,7 @@ 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.1";
+export const version = "1.0.4";
 interface PLPConfig<T extends Display> extends BaseProductListingConfig {
     /**
      * The product card to use for rendering products.

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.1";
+const $db7b67857900028b$export$83d89fbfd8236492 = "1.0.4";
 
 
 
@@ -66,6 +66,34 @@ const $0b7cd4fb39fc3502$export$8e769ad4338a911e = {
 
 
 
+
+class $d7a14567b529586f$export$d0f82e3ef89b1f22 extends (0, $4GYXz$react.Component) {
+    constructor(props){
+        super(props);
+        this.state = {
+            hasError: false
+        };
+    }
+    static getDerivedStateFromError() {
+        // Update state so the next render will show the fallback UI.
+        return {
+            hasError: true
+        };
+    }
+    componentDidCatch(error) {
+        this.props.on_error(error);
+    }
+    render() {
+        if (this.state.hasError) // You can render any custom fallback UI
+        return (0, $4GYXz$react.createElement)("div", {
+            children: "Component failed"
+        });
+        return this.props.children;
+    }
+}
+
+
+
 let $b4d0d98857ed9934$var$run_on_href_change;
 let $b4d0d98857ed9934$var$old_href = location.href;
 function $b4d0d98857ed9934$export$74f3924c5027fe1d(cb) {
@@ -73,8 +101,7 @@ function $b4d0d98857ed9934$export$74f3924c5027fe1d(cb) {
 }
 (0, $4GYXz$depictaiutilishared.instant_exec_on_suspect_history_change).add((0, $4GYXz$depictaiutilishared.catchify)(()=>{
     const { href: href  } = location;
-    if (!$b4d0d98857ed9934$var$run_on_href_change || $b4d0d98857ed9934$var$old_href === href) return;
-    $b4d0d98857ed9934$var$run_on_href_change?.(href);
+    if ($b4d0d98857ed9934$var$run_on_href_change && $b4d0d98857ed9934$var$old_href !== href) $b4d0d98857ed9934$var$run_on_href_change(href);
     $b4d0d98857ed9934$var$old_href = href;
 }));
 const $b4d0d98857ed9934$export$775e6b3892b5ad52 = (url = location)=>url.pathname == (0, $4GYXz$solidjs.untrack)((0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).search_page_path_[0]); // might have changed therefore get it from globalState
@@ -110,21 +137,31 @@ function $b4d0d98857ed9934$export$e5139bbbb9a05035(component, is_set = (0, $0b7c
 }
 async function $b4d0d98857ed9934$export$79c79419c1ef0081({ display: display , component_portals: component_portals , set_portals: set_portals , react_template: react_template  }) {
     let set_react_has_ran_hooks;
+    let was_cleaned_up = false;
     const react_has_ran_hooks = new Promise((r)=>set_react_has_ran_hooks = r);
     const solid_container = document.createElement("div");
+    const owner = (0, $4GYXz$solidjs.getOwner)();
     const reactProductCard = (0, $4GYXz$reactjsxruntime.jsx)((props)=>{
-        // Sneak in a hook into their product card component
+        // Sneak in a hook into their product card component to know once react has finished rendering and running hooks
         (0, $4GYXz$react.useEffect)(set_react_has_ran_hooks, []);
         return react_template(props);
     }, {
         display: display
     });
-    const portal = $4GYXz$reactdom.createPortal(reactProductCard, solid_container);
+    const reactProductCardInErrorBoundary = (0, $4GYXz$reactjsxruntime.jsx)((0, $d7a14567b529586f$export$d0f82e3ef89b1f22), {
+        children: reactProductCard,
+        on_error: (error)=>(0, $4GYXz$solidjs.runWithOwner)(owner, ()=>{
+                if (was_cleaned_up) return; // Would infinite loop if we'd throw after we've already been cleaned up. That is because the `ErrorBoundary` won't be "registered" with the cleaned-up owner anymore so react would hear about the throw and attempt to re-render the error boundary or something which would throw again, etc.
+                throw new (0, $4GYXz$depictaiui.ProductCardError)(error);
+            })
+    });
+    const portal = $4GYXz$reactdom.createPortal(reactProductCardInErrorBoundary, solid_container);
     component_portals.add(portal);
     set_portals([
         ...component_portals
     ]);
     (0, $4GYXz$solidjs.onCleanup)(()=>{
+        was_cleaned_up = true;
         // this will stop working after any await so be careful to not await before this, or you'll have to carry the owner over with getOwner and runWithOwner
         component_portals.delete(portal);
         set_portals([
@@ -271,7 +308,7 @@ const $25c0a91312868994$export$47e064413edabf36 = (merchant, market, userId, ses
 
 function $24b00503eef73528$export$9fac37a9c21c2f3b(props) {
     const { children: children , navigateFunction: navigateFunction , market: market , merchant: merchant , locale: locale , metaData: metaData , userId: userId , sessionId: sessionId  } = props;
-    const usedLocale = locale ?? (0, $4GYXz$depictaiuilocales.en);
+    const usedLocale = locale ?? (0, $4GYXz$depictaiuilocales.defaultLocale);
     const { searchPagePath: searchPagePath , urlParamName: urlParamName , enableCategorySuggestions: enableCategorySuggestions  } = props.search ?? {};
     // Will run on other prop changes, but harmless
     (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).userId = userId;
@@ -390,20 +427,8 @@ function $7ad7a3d0011b7b1b$var$SolidSearchPage(props, set_portals) {
     return (0, $4GYXz$depictaiui.SearchPage)({
         // Default config goes here
         include_input_field: (0, $4GYXz$solidjs.untrack)(()=>props.includeInputField) ?? true,
-        cols_at_size: (0, $4GYXz$solidjs.untrack)(()=>props.columnsAtSize) ?? [
-            [
-                4
-            ],
-            [
-                3,
-                1024
-            ],
-            [
-                2,
-                901
-            ]
-        ],
-        grid_spacing: (0, $4GYXz$solidjs.untrack)(()=>props.gridSpacing) ?? "2%",
+        cols_at_size: (0, $4GYXz$solidjs.untrack)(()=>props.columnsAtSize) ?? (0, $4GYXz$depictaiui.defaultColsAtSize),
+        grid_spacing: (0, $4GYXz$solidjs.untrack)(()=>props.gridSpacing) ?? (0, $4GYXz$depictaiui.defaultGridSpacing),
         depict_search: depict_search,
         product_card_template: (display)=>(0, $b4d0d98857ed9934$export$79c79419c1ef0081)({
                 display: display,
@@ -442,23 +467,11 @@ function $5aa5fcb9f8a2bebc$var$SolidCategoryPage(props, set_portals) {
     });
     const category = ()=>(0, $4GYXz$depictaiui.CategoryPage)({
             depict_category: depict_category,
-            cols_at_size: (0, $4GYXz$solidjs.untrack)(()=>props.columnsAtSize) ?? [
-                [
-                    4
-                ],
-                [
-                    3,
-                    1024
-                ],
-                [
-                    2,
-                    901
-                ]
-            ],
-            grid_spacing: (0, $4GYXz$solidjs.untrack)(()=>props.gridSpacing) ?? "2%",
-            category_title: (0, $4GYXz$solidjs.untrack)(()=>props.categoryTitlePlugin) || (0, $4GYXz$depictaiui.CategoryTitle),
-            show_breadcrumbs: (0, $4GYXz$solidjs.untrack)(()=>props.showBreadcrumbs === undefined ? true : props.showBreadcrumbs),
-            show_quicklinks: (0, $4GYXz$solidjs.untrack)(()=>props.showQuicklinks === undefined ? true : props.showQuicklinks),
+            cols_at_size: (0, $4GYXz$solidjs.untrack)(()=>props.columnsAtSize) ?? (0, $4GYXz$depictaiui.defaultColsAtSize),
+            grid_spacing: (0, $4GYXz$solidjs.untrack)(()=>props.gridSpacing) ?? (0, $4GYXz$depictaiui.defaultGridSpacing),
+            category_title: (0, $4GYXz$solidjs.untrack)(()=>props.categoryTitlePlugin) || (0, $4GYXz$depictaiui.defaultCategoryTitlePlugin),
+            show_breadcrumbs: (0, $4GYXz$solidjs.untrack)(()=>props.showBreadcrumbs),
+            show_quicklinks: (0, $4GYXz$solidjs.untrack)(()=>props.showQuicklinks),
             product_card_template: (display)=>(0, $b4d0d98857ed9934$export$79c79419c1ef0081)({
                     display: display,
                     react_template: (0, $4GYXz$solidjs.untrack)(()=>props.productCard),

package/dist/module.js

@@ -1,8 +1,8 @@
 import {add_to_version_info as $TZSbU$add_to_version_info, catchify as $TZSbU$catchify, queueMacroTask as $TZSbU$queueMacroTask, instant_exec_on_suspect_history_change as $TZSbU$instant_exec_on_suspect_history_change, ContainedPlaceholderImage as $TZSbU$ContainedPlaceholderImage, Placeholder as $TZSbU$Placeholder} from "@depict-ai/utilishared";
-import {CategoryTitle as $43099132aad1ceb6$re_export$CategoryTitle, embedded_num_products as $43099132aad1ceb6$re_export$EmbeddedNumProducts, DepictAPI as $TZSbU$DepictAPI, DepictSearch as $TZSbU$DepictSearch, DepictCategory as $TZSbU$DepictCategory, get_search_query_updating_blocked_signal as $TZSbU$get_search_query_updating_blocked_signal, SearchPage as $TZSbU$SearchPage, CategoryPage as $TZSbU$CategoryPage, BreadCrumbs as $TZSbU$BreadCrumbs, QuickLinks as $TZSbU$QuickLinks, open_modal_with_alignment as $TZSbU$open_modal_with_alignment, SearchField as $TZSbU$SearchField, fetchDepictRecommendations as $TZSbU$fetchDepictRecommendations} from "@depict-ai/ui";
-import {createRoot as $TZSbU$createRoot, untrack as $TZSbU$untrack, createEffect as $TZSbU$createEffect, createComponent as $TZSbU$createComponent, Show as $TZSbU$Show, onCleanup as $TZSbU$onCleanup, createSignal as $TZSbU$createSignal, createComputed as $TZSbU$createComputed, createMemo as $TZSbU$createMemo} from "solid-js";
-import {createElement as $TZSbU$createElement, Fragment as $TZSbU$Fragment, useState as $TZSbU$useState, useRef as $TZSbU$useRef, useEffect as $TZSbU$useEffect, forwardRef as $TZSbU$forwardRef} from "react";
-import {en as $TZSbU$en} from "@depict-ai/ui/locales";
+import {CategoryTitle as $43099132aad1ceb6$re_export$CategoryTitle, embedded_num_products as $43099132aad1ceb6$re_export$EmbeddedNumProducts, DepictAPI as $TZSbU$DepictAPI, DepictSearch as $TZSbU$DepictSearch, DepictCategory as $TZSbU$DepictCategory, ProductCardError as $TZSbU$ProductCardError, get_search_query_updating_blocked_signal as $TZSbU$get_search_query_updating_blocked_signal, SearchPage as $TZSbU$SearchPage, defaultColsAtSize as $TZSbU$defaultColsAtSize, defaultGridSpacing as $TZSbU$defaultGridSpacing, CategoryPage as $TZSbU$CategoryPage, defaultCategoryTitlePlugin as $TZSbU$defaultCategoryTitlePlugin, BreadCrumbs as $TZSbU$BreadCrumbs, QuickLinks as $TZSbU$QuickLinks, open_modal_with_alignment as $TZSbU$open_modal_with_alignment, SearchField as $TZSbU$SearchField, fetchDepictRecommendations as $TZSbU$fetchDepictRecommendations} from "@depict-ai/ui";
+import {createRoot as $TZSbU$createRoot, untrack as $TZSbU$untrack, createEffect as $TZSbU$createEffect, createComponent as $TZSbU$createComponent, Show as $TZSbU$Show, getOwner as $TZSbU$getOwner, runWithOwner as $TZSbU$runWithOwner, onCleanup as $TZSbU$onCleanup, createSignal as $TZSbU$createSignal, createComputed as $TZSbU$createComputed, createMemo as $TZSbU$createMemo} from "solid-js";
+import {createElement as $TZSbU$createElement, Fragment as $TZSbU$Fragment, useState as $TZSbU$useState, useRef as $TZSbU$useRef, useEffect as $TZSbU$useEffect, Component as $TZSbU$Component, forwardRef as $TZSbU$forwardRef} from "react";
+import {defaultLocale as $TZSbU$defaultLocale} from "@depict-ai/ui/locales";
 import {render as $TZSbU$render} from "solid-js/web";
 import {jsx as $TZSbU$jsx} from "react/jsx-runtime";
 import {createPortal as $TZSbU$createPortal} from "react-dom";
@@ -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.1";
+const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "1.0.4";
 
 
 
@@ -46,6 +46,34 @@ const $42858f023ef23dab$export$8e769ad4338a911e = {
 
 
 
+
+class $d5c9e1f3545b4984$export$d0f82e3ef89b1f22 extends (0, $TZSbU$Component) {
+    constructor(props){
+        super(props);
+        this.state = {
+            hasError: false
+        };
+    }
+    static getDerivedStateFromError() {
+        // Update state so the next render will show the fallback UI.
+        return {
+            hasError: true
+        };
+    }
+    componentDidCatch(error) {
+        this.props.on_error(error);
+    }
+    render() {
+        if (this.state.hasError) // You can render any custom fallback UI
+        return (0, $TZSbU$createElement)("div", {
+            children: "Component failed"
+        });
+        return this.props.children;
+    }
+}
+
+
+
 let $c83ba9ab79386687$var$run_on_href_change;
 let $c83ba9ab79386687$var$old_href = location.href;
 function $c83ba9ab79386687$export$74f3924c5027fe1d(cb) {
@@ -53,8 +81,7 @@ function $c83ba9ab79386687$export$74f3924c5027fe1d(cb) {
 }
 (0, $TZSbU$instant_exec_on_suspect_history_change).add((0, $TZSbU$catchify)(()=>{
     const { href: href  } = location;
-    if (!$c83ba9ab79386687$var$run_on_href_change || $c83ba9ab79386687$var$old_href === href) return;
-    $c83ba9ab79386687$var$run_on_href_change?.(href);
+    if ($c83ba9ab79386687$var$run_on_href_change && $c83ba9ab79386687$var$old_href !== href) $c83ba9ab79386687$var$run_on_href_change(href);
     $c83ba9ab79386687$var$old_href = href;
 }));
 const $c83ba9ab79386687$export$775e6b3892b5ad52 = (url = location)=>url.pathname == (0, $TZSbU$untrack)((0, $42858f023ef23dab$export$8e769ad4338a911e).search_page_path_[0]); // might have changed therefore get it from globalState
@@ -90,21 +117,31 @@ function $c83ba9ab79386687$export$e5139bbbb9a05035(component, is_set = (0, $4285
 }
 async function $c83ba9ab79386687$export$79c79419c1ef0081({ display: display , component_portals: component_portals , set_portals: set_portals , react_template: react_template  }) {
     let set_react_has_ran_hooks;
+    let was_cleaned_up = false;
     const react_has_ran_hooks = new Promise((r)=>set_react_has_ran_hooks = r);
     const solid_container = document.createElement("div");
+    const owner = (0, $TZSbU$getOwner)();
     const reactProductCard = (0, $TZSbU$jsx)((props)=>{
-        // Sneak in a hook into their product card component
+        // Sneak in a hook into their product card component to know once react has finished rendering and running hooks
         (0, $TZSbU$useEffect)(set_react_has_ran_hooks, []);
         return react_template(props);
     }, {
         display: display
     });
-    const portal = $TZSbU$createPortal(reactProductCard, solid_container);
+    const reactProductCardInErrorBoundary = (0, $TZSbU$jsx)((0, $d5c9e1f3545b4984$export$d0f82e3ef89b1f22), {
+        children: reactProductCard,
+        on_error: (error)=>(0, $TZSbU$runWithOwner)(owner, ()=>{
+                if (was_cleaned_up) return; // Would infinite loop if we'd throw after we've already been cleaned up. That is because the `ErrorBoundary` won't be "registered" with the cleaned-up owner anymore so react would hear about the throw and attempt to re-render the error boundary or something which would throw again, etc.
+                throw new (0, $TZSbU$ProductCardError)(error);
+            })
+    });
+    const portal = $TZSbU$createPortal(reactProductCardInErrorBoundary, solid_container);
     component_portals.add(portal);
     set_portals([
         ...component_portals
     ]);
     (0, $TZSbU$onCleanup)(()=>{
+        was_cleaned_up = true;
         // this will stop working after any await so be careful to not await before this, or you'll have to carry the owner over with getOwner and runWithOwner
         component_portals.delete(portal);
         set_portals([
@@ -251,7 +288,7 @@ const $a00d8f27abd5d0b0$export$47e064413edabf36 = (merchant, market, userId, ses
 
 function $5376eb2a386cd90d$export$9fac37a9c21c2f3b(props) {
     const { children: children , navigateFunction: navigateFunction , market: market , merchant: merchant , locale: locale , metaData: metaData , userId: userId , sessionId: sessionId  } = props;
-    const usedLocale = locale ?? (0, $TZSbU$en);
+    const usedLocale = locale ?? (0, $TZSbU$defaultLocale);
     const { searchPagePath: searchPagePath , urlParamName: urlParamName , enableCategorySuggestions: enableCategorySuggestions  } = props.search ?? {};
     // Will run on other prop changes, but harmless
     (0, $42858f023ef23dab$export$8e769ad4338a911e).userId = userId;
@@ -370,20 +407,8 @@ function $4a678f0c87b12e78$var$SolidSearchPage(props, set_portals) {
     return (0, $TZSbU$SearchPage)({
         // Default config goes here
         include_input_field: (0, $TZSbU$untrack)(()=>props.includeInputField) ?? true,
-        cols_at_size: (0, $TZSbU$untrack)(()=>props.columnsAtSize) ?? [
-            [
-                4
-            ],
-            [
-                3,
-                1024
-            ],
-            [
-                2,
-                901
-            ]
-        ],
-        grid_spacing: (0, $TZSbU$untrack)(()=>props.gridSpacing) ?? "2%",
+        cols_at_size: (0, $TZSbU$untrack)(()=>props.columnsAtSize) ?? (0, $TZSbU$defaultColsAtSize),
+        grid_spacing: (0, $TZSbU$untrack)(()=>props.gridSpacing) ?? (0, $TZSbU$defaultGridSpacing),
         depict_search: depict_search,
         product_card_template: (display)=>(0, $c83ba9ab79386687$export$79c79419c1ef0081)({
                 display: display,
@@ -422,23 +447,11 @@ function $48d7f568740a317d$var$SolidCategoryPage(props, set_portals) {
     });
     const category = ()=>(0, $TZSbU$CategoryPage)({
             depict_category: depict_category,
-            cols_at_size: (0, $TZSbU$untrack)(()=>props.columnsAtSize) ?? [
-                [
-                    4
-                ],
-                [
-                    3,
-                    1024
-                ],
-                [
-                    2,
-                    901
-                ]
-            ],
-            grid_spacing: (0, $TZSbU$untrack)(()=>props.gridSpacing) ?? "2%",
-            category_title: (0, $TZSbU$untrack)(()=>props.categoryTitlePlugin) || (0, $43099132aad1ceb6$re_export$CategoryTitle),
-            show_breadcrumbs: (0, $TZSbU$untrack)(()=>props.showBreadcrumbs === undefined ? true : props.showBreadcrumbs),
-            show_quicklinks: (0, $TZSbU$untrack)(()=>props.showQuicklinks === undefined ? true : props.showQuicklinks),
+            cols_at_size: (0, $TZSbU$untrack)(()=>props.columnsAtSize) ?? (0, $TZSbU$defaultColsAtSize),
+            grid_spacing: (0, $TZSbU$untrack)(()=>props.gridSpacing) ?? (0, $TZSbU$defaultGridSpacing),
+            category_title: (0, $TZSbU$untrack)(()=>props.categoryTitlePlugin) || (0, $TZSbU$defaultCategoryTitlePlugin),
+            show_breadcrumbs: (0, $TZSbU$untrack)(()=>props.showBreadcrumbs),
+            show_quicklinks: (0, $TZSbU$untrack)(()=>props.showQuicklinks),
             product_card_template: (display)=>(0, $c83ba9ab79386687$export$79c79419c1ef0081)({
                     display: display,
                     react_template: (0, $TZSbU$untrack)(()=>props.productCard),

package/dist-server/index.d.ts

@@ -33,7 +33,7 @@ interface UseFetchRecommendationsReturn<T extends Display> {
      */
     fetchRecommendations: (opts: FetchRecsOptions) => Promise<T[]>;
 }
-export const version = "1.0.1";
+export const version = "1.0.4";
 export function DepictProvider(props: any): any;
 export function SearchPage(): any;
 export function CategoryPage(): any;

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.1";
+const $db7b67857900028b$export$83d89fbfd8236492 = "1.0.4";
 
 
 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.1";
+const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "1.0.4";
 
 
 function $2b1fdeb83610500f$export$9fac37a9c21c2f3b(props) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depict-ai/react-ui",
-  "version": "1.0.1",
+  "version": "1.0.4",
   "packageManager": "yarn@3.2.2",
   "source": "src/index.ts",
   "main": "dist/main.js",
@@ -96,15 +96,16 @@
     "/locales"
   ],
   "dependencies": {
-    "@depict-ai/dpc": "^1.0.3",
-    "@depict-ai/plp-styling": "^1.0.3",
-    "@depict-ai/ui": "^1.0.3",
-    "@depict-ai/utilishared": "^1.0.3",
+    "@depict-ai/dpc": "^1.0.5",
+    "@depict-ai/plp-styling": "^1.0.6",
+    "@depict-ai/ui": "^1.0.6",
+    "@depict-ai/utilishared": "^1.0.5",
     "solid-js": "^1.7.3"
   },
   "peerDependencies": {
     "react": ">= 16.14.0",
-    "react-dom": ">= 16.14.0"
+    "react-dom": ">= 16.14.0",
+    "sass": ">= 1.54.6"
   },
   "devDependencies": {
     "@babel/core": "latest",
@@ -112,7 +113,7 @@
     "@babel/preset-typescript": "latest",
     "@babel/runtime": "latest",
     "@babel/runtime-corejs3": "latest",
-    "@depict-ai/plp-styling": "^1.0.3",
+    "@depict-ai/plp-styling": "^1.0.6",
     "@jest/globals": "^29.3.1",
     "@parcel/babel-preset-env": "latest",
     "@parcel/resolver-default": "^2.8.0",