@depict-ai/react-ui 1.3.3 → 1.3.4

package/dist/index.d.ts

@@ -1,10 +1,9 @@
-import { BaseProductListingConfig, BaseProviderConfig, BaseSearchProviderConfig, BaseSearchPageConfig, ModernDisplayWithPageUrl as _ModernDisplayWithPageUrl1, BaseCategoryPageConfig, CategoryTitle, embedded_num_products, ImagePlaceholder as _ImagePlaceholder1, TextPlaceholder as _TextPlaceholder1, ExclusiveId, fetchDepictRecommendations } from "@depict-ai/ui";
+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 React, { ReactNode, PropsWithChildren, ReactElement } from "react";
 import { DPC } from "@depict-ai/dpc";
 import { Locale } from "@depict-ai/ui/locales";
-import { ModernDisplayWithPageUrl } from "@depict-ai/ui/src";
-export const version = "1.3.3";
+export const version = "1.3.4";
 interface PLPConfig<T extends Display> extends BaseProductListingConfig {
     /**
      * The product card to use for rendering products.
@@ -213,7 +212,7 @@ interface SearchPageConfig<T extends Display> extends BaseSearchPageConfig, PLPC
  */
 export function SearchPage<OriginalDisplay extends Display, OutputDisplay extends ModernDisplay | never>(props: SearchPageConfig<[
     OutputDisplay
-] extends [never] ? OriginalDisplay : _ModernDisplayWithPageUrl1<OutputDisplay>>): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+] 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.
@@ -275,7 +274,7 @@ interface CategoryPageConfig<T extends Display> extends BaseCategoryPageConfig,
  */
 export function CategoryPage<OriginalDisplay extends Display, OutputDisplay extends ModernDisplay | never>(props: CategoryPageConfig<[
     OutputDisplay
-] extends [never] ? OriginalDisplay : _ModernDisplayWithPageUrl1<OutputDisplay>>): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+] 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.
  */

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.3.3";
+const $db7b67857900028b$export$83d89fbfd8236492 = "1.3.4";
 
 
 
@@ -448,8 +448,12 @@ function $7ad7a3d0011b7b1b$var$SolidSearchPage(props, set_portals) {
         get include_input_field () {
             return props.includeInputField;
         },
-        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),
+        get cols_at_size () {
+            return props.columnsAtSize ?? (0, $4GYXz$depictaiui.defaultColsAtSize);
+        },
+        get grid_spacing () {
+            return props.gridSpacing ?? (0, $4GYXz$depictaiui.defaultGridSpacing);
+        },
         depict_search: depict_search,
         product_card_template: (display)=>(0, $b4d0d98857ed9934$export$79c79419c1ef0081)({
                 display: display,
@@ -509,8 +513,12 @@ function $5aa5fcb9f8a2bebc$var$SolidCategoryPage(props, set_portals) {
     (0, $4GYXz$solidjs.createComputed)(()=>depict_category.listing_type = props.listingType);
     const category = ()=>(0, $4GYXz$depictaiui.CategoryPage)({
             depict_category: depict_category,
-            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),
+            get cols_at_size () {
+                return props.columnsAtSize ?? (0, $4GYXz$depictaiui.defaultColsAtSize);
+            },
+            get grid_spacing () {
+                return 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),
@@ -636,26 +644,27 @@ function $ae73b15c325f1b21$export$912994940e660d32(params = {}) {
 
 
 
-const $cd591d0e4ce29df7$export$bde46b5bb6287cea = (props)=>{
-    const ReactSearchField = ()=>{
-        return (0, $b4d0d98857ed9934$export$f6e64e17bd69eeef)({
+
+
+const $913da7f4d0bc77f2$export$9bb30bbe003b82e0 = (props = {})=>{
+    // We should just export a plain SearchField component here, not a weird hook thing, but I don't want to make a breaking change. Just fixing the re-rendering issue for now.
+    // Create signal that persists across renders
+    const [[get_aligner_signal_value, set_aligner_signal_value]] = (0, $4GYXz$react.useState)((0, $4GYXz$solidjs.createSignal)());
+    // Update signal value when alignerRef changes
+    set_aligner_signal_value(props?.alignerRef);
+    // Make sure react never re-renders the actual SearchField component
+    const componentFunction = (0, $4GYXz$react.useCallback)(()=>(0, $b4d0d98857ed9934$export$f6e64e17bd69eeef)({
             solid_component: (0, $b4d0d98857ed9934$export$e5139bbbb9a05035)(()=>(0, $4GYXz$depictaiui.SearchField)({
                     depict_search: (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).search,
-                    aligner_ref: props?.alignerRef?.current
+                    get aligner_ref () {
+                        // React mutates the object at some random time so only get the current value once it actually is requested
+                        return get_aligner_signal_value()?.current;
+                    }
                 })),
             props: {}
-        });
-    };
-    return ReactSearchField;
-};
-
-
-const $913da7f4d0bc77f2$export$9bb30bbe003b82e0 = (props)=>{
-    const SearchField = (0, $cd591d0e4ce29df7$export$bde46b5bb6287cea)({
-        alignerRef: props?.alignerRef
-    });
+        }), []);
     return {
-        SearchField: SearchField
+        SearchField: componentFunction
     };
 };
 

package/dist/module.js

@@ -1,7 +1,7 @@
 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, derror as $TZSbU$derror} 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, 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, ImagePlaceholder as $TZSbU$ImagePlaceholder, TextPlaceholder as $TZSbU$TextPlaceholder, 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} 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 {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, useCallback as $TZSbU$useCallback} from "react";
 import {defaultLocale as $TZSbU$defaultLocale} from "@depict-ai/ui/locales";
 import {render as $TZSbU$render, hydrate as $TZSbU$hydrate} from "solid-js/web";
 import {jsx as $TZSbU$jsx} from "react/jsx-runtime";
@@ -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.3.3";
+const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "1.3.4";
 
 
 
@@ -428,8 +428,12 @@ function $4a678f0c87b12e78$var$SolidSearchPage(props, set_portals) {
         get include_input_field () {
             return props.includeInputField;
         },
-        cols_at_size: (0, $TZSbU$untrack)(()=>props.columnsAtSize) ?? (0, $TZSbU$defaultColsAtSize),
-        grid_spacing: (0, $TZSbU$untrack)(()=>props.gridSpacing) ?? (0, $TZSbU$defaultGridSpacing),
+        get cols_at_size () {
+            return props.columnsAtSize ?? (0, $TZSbU$defaultColsAtSize);
+        },
+        get grid_spacing () {
+            return props.gridSpacing ?? (0, $TZSbU$defaultGridSpacing);
+        },
         depict_search: depict_search,
         product_card_template: (display)=>(0, $c83ba9ab79386687$export$79c79419c1ef0081)({
                 display: display,
@@ -489,8 +493,12 @@ function $48d7f568740a317d$var$SolidCategoryPage(props, set_portals) {
     (0, $TZSbU$createComputed)(()=>depict_category.listing_type = props.listingType);
     const category = ()=>(0, $TZSbU$CategoryPage)({
             depict_category: depict_category,
-            cols_at_size: (0, $TZSbU$untrack)(()=>props.columnsAtSize) ?? (0, $TZSbU$defaultColsAtSize),
-            grid_spacing: (0, $TZSbU$untrack)(()=>props.gridSpacing) ?? (0, $TZSbU$defaultGridSpacing),
+            get cols_at_size () {
+                return props.columnsAtSize ?? (0, $TZSbU$defaultColsAtSize);
+            },
+            get grid_spacing () {
+                return 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),
@@ -616,26 +624,27 @@ function $70344e5e0d0fea06$export$912994940e660d32(params = {}) {
 
 
 
-const $cdd7408b22d1586a$export$bde46b5bb6287cea = (props)=>{
-    const ReactSearchField = ()=>{
-        return (0, $c83ba9ab79386687$export$f6e64e17bd69eeef)({
+
+
+const $2b886cf548a4775c$export$9bb30bbe003b82e0 = (props = {})=>{
+    // We should just export a plain SearchField component here, not a weird hook thing, but I don't want to make a breaking change. Just fixing the re-rendering issue for now.
+    // Create signal that persists across renders
+    const [[get_aligner_signal_value, set_aligner_signal_value]] = (0, $TZSbU$useState)((0, $TZSbU$createSignal)());
+    // Update signal value when alignerRef changes
+    set_aligner_signal_value(props?.alignerRef);
+    // Make sure react never re-renders the actual SearchField component
+    const componentFunction = (0, $TZSbU$useCallback)(()=>(0, $c83ba9ab79386687$export$f6e64e17bd69eeef)({
             solid_component: (0, $c83ba9ab79386687$export$e5139bbbb9a05035)(()=>(0, $TZSbU$SearchField)({
                     depict_search: (0, $42858f023ef23dab$export$8e769ad4338a911e).search,
-                    aligner_ref: props?.alignerRef?.current
+                    get aligner_ref () {
+                        // React mutates the object at some random time so only get the current value once it actually is requested
+                        return get_aligner_signal_value()?.current;
+                    }
                 })),
             props: {}
-        });
-    };
-    return ReactSearchField;
-};
-
-
-const $2b886cf548a4775c$export$9bb30bbe003b82e0 = (props)=>{
-    const SearchField = (0, $cdd7408b22d1586a$export$bde46b5bb6287cea)({
-        alignerRef: props?.alignerRef
-    });
+        }), []);
     return {
-        SearchField: SearchField
+        SearchField: componentFunction
     };
 };
 

package/dist-server/index.d.ts

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

package/dist-server/main.js

@@ -40,7 +40,7 @@ function $35dfe83eec81954c$export$4b564d7f5a1b1d43({ solid_component: solid_comp
 }
 
 
-const $db7b67857900028b$export$83d89fbfd8236492 = "1.3.3";
+const $db7b67857900028b$export$83d89fbfd8236492 = "1.3.4";
 
 
 function $41e7e5d85b5e0d49$export$9fac37a9c21c2f3b(props) {

package/dist-server/module.js

@@ -22,7 +22,7 @@ function $4568c09979447ab1$export$4b564d7f5a1b1d43({ solid_component: solid_comp
 }
 
 
-const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "1.3.3";
+const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "1.3.4";
 
 
 function $2b1fdeb83610500f$export$9fac37a9c21c2f3b(props) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depict-ai/react-ui",
-  "version": "1.3.3",
+  "version": "1.3.4",
   "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.27",
-    "@depict-ai/plp-styling": "^1.0.26",
-    "@depict-ai/ui": "^1.3.2",
-    "@depict-ai/utilishared": "^1.0.25",
+    "@depict-ai/dpc": "^1.0.28",
+    "@depict-ai/plp-styling": "^1.0.27",
+    "@depict-ai/ui": "^1.3.3",
+    "@depict-ai/utilishared": "^1.0.26",
     "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.26",
+    "@depict-ai/plp-styling": "^1.0.27",
     "@jest/globals": "^29.3.1",
     "@parcel/babel-preset-env": "latest",
     "@parcel/resolver-default": "^2.8.0",