@depict-ai/ui 0.0.41 → 0.0.43

package/dist/index.d.ts

@@ -9,7 +9,7 @@ import { SearchSuggestionsRequest } from "@depict-ai/types/api/SearchSuggestions
 import { ProductListingRequest } from "@depict-ai/types/api/ProductListingRequest";
 import { ProductListingResponse, BaseCategoryDisplay } from "@depict-ai/types/api/ProductListingResponse";
 import { JSX as _JSX1 } from "solid-js/types/jsx";
-export const version = "0.0.41";
+export const version = "0.0.43";
 type ExclusiveId = {
     categoryId: string;
     productId?: undefined;
@@ -67,7 +67,7 @@ type RecsAPIWrapperOptions = {
  * ```
  * @return This function is guaranteed to return an array of Displays. If anything fails, you will get an empty array.
  */
-export function fetchDepictRecommendations<T = Display>({ merchant, market, headers, ...fetch_recs_options }: RecsAPIWrapperOptions): Promise<T[]>;
+export function fetchDepictRecommendations<T extends Display = Display>({ merchant, market, headers, ...fetch_recs_options }: RecsAPIWrapperOptions): Promise<T[]>;
 /**
  * Like standard_price_format except that the price and the formatting are reactive accessors
  */
@@ -155,7 +155,7 @@ interface category_i18n extends plp_shared_i18n {
  */
 export interface Locale extends category_i18n, search_i18n {
 }
-export type InstantCard = (display: unknown, context: {
+export type InstantCard<T extends Display> = (display: T, context: {
     index: number;
     i18n: _search_i18n1;
     merchant: string;
@@ -250,11 +250,11 @@ export class DepictCategory {
     set market(market: string);
     constructor({ api, on_navigation, ...props_on_class }: DepictCategoryConstructorOptions);
 }
-export function CategoryPage({ depict_category, grid_spacing, cols_at_size, product_card_template, get_product_id, show_breadcrumbs, show_quicklinks, category_title, }: {
+export function CategoryPage<T extends Display>({ depict_category, grid_spacing, cols_at_size, product_card_template, get_product_id, show_breadcrumbs, show_quicklinks, category_title, }: {
     depict_category: DepictCategory;
     grid_spacing: SDKGridSpacing;
     cols_at_size: SDKColsAtSize;
-    product_card_template: (display: Display, info: InfoForProcessing) => Promise<Node_Array> | Node_Array;
+    product_card_template: (display: T | null, info: InfoForProcessing<T>) => Promise<Node_Array> | Node_Array;
     get_product_id: (url?: string) => string | Promise<string>;
     show_quicklinks?: boolean;
     show_breadcrumbs?: boolean;
@@ -292,7 +292,15 @@ export type RenderCategorySuggestion = (category_suggestion: Accessor<CategorySu
     op: WithRequired<SearchFilter, "op">["op"];
     data: WithRequired<SearchFilter, "data">["data"];
 }[]>) => JSX.Element;
-type ConstructorOptions = {
+/**
+ * Connects the height of the query input to the height of the aligner.
+ * @param aligner
+ * @returns
+ */
+export function connect_query_input_height_to_aligner_height(aligner: HTMLElement): {
+    cleanup: () => void;
+};
+type ConstructorOptions<T extends Display> = {
     search_query_url_param_name?: string;
     market: string;
     merchant: string;
@@ -303,7 +311,7 @@ type ConstructorOptions = {
     disable_scrolling_during_modal?: boolean;
     api?: DepictAPI;
     bottom_distance_under_modal_?: Accessor<number | undefined>;
-    render_instant_card?: InstantCard;
+    render_instant_card?: InstantCard<T>;
 };
 type OpenModalArguments = [
     options_for_modal?: {
@@ -313,10 +321,10 @@ type OpenModalArguments = [
     },
     on_dispose?: VoidFunction
 ];
-export const get_search_query_updating_blocked_signal: (depict_search: DepictSearch) => Signal<boolean> | undefined;
-export class DepictSearch {
+export const get_search_query_updating_blocked_signal: (depict_search: DepictSearch<any>) => Signal<boolean> | undefined;
+export class DepictSearch<T extends Display> {
     #private;
-    constructor({ search_query_url_param_name, url_transformer, on_navigation: raw_on_navigation, enable_category_suggestions, disable_scrolling_during_modal, api, bottom_distance_under_modal_, render_instant_card, ...props_on_class }: ConstructorOptions);
+    constructor({ search_query_url_param_name, url_transformer, on_navigation: raw_on_navigation, enable_category_suggestions, disable_scrolling_during_modal, api, bottom_distance_under_modal_, render_instant_card, ...props_on_class }: ConstructorOptions<T>);
     get localization(): search_i18n;
     set localization(locale_obj: search_i18n);
     get modal_open(): OpenModalArguments | boolean;
@@ -326,24 +334,24 @@ export class DepictSearch {
     get market(): string;
     set market(market: string);
 }
-export function SearchPage({ depict_search, include_input_field, grid_spacing, cols_at_size, product_card_template, get_product_id, extra_depict_options, }: {
-    depict_search: DepictSearch;
+export function SearchPage<T extends Display>({ depict_search, include_input_field, grid_spacing, cols_at_size, product_card_template, get_product_id, extra_depict_options, }: {
+    depict_search: DepictSearch<T>;
     include_input_field?: boolean | {
         on_open_?: VoidFunction;
         on_close_?: VoidFunction;
     };
     grid_spacing: SDKGridSpacing;
     cols_at_size: SDKColsAtSize;
-    product_card_template: (display: Display, info: InfoForProcessing) => Promise<Node_Array> | Node_Array;
+    product_card_template: (display: T | null, info: InfoForProcessing<T>) => Promise<Node_Array> | Node_Array;
     get_product_id: (url?: string) => string | Promise<string>;
     extra_depict_options?: {
-        pre_processors?: RR_PreProcessor[];
-        post_processors?: RR_PostProcessor[];
+        pre_processors?: RR_PreProcessor<T>[];
+        post_processors?: RR_PostProcessor<T>[];
         recommendations_cols_at_size?: SDKColsAtSize;
     };
 }): Node_Array;
 interface SearchFieldParams {
-    depict_search: DepictSearch;
+    depict_search: DepictSearch<any>;
     modal_dispose_handler?: VoidFunction;
     click_handler?: (this: HTMLDivElement, ev: MouseEvent) => any;
     aligner_ref?: HTMLElement | null;

package/dist/main.js

@@ -1,3 +1,4 @@
+const process = { env: {} }; // In case that the code using this wasn't built with "node emulation", just make process.env accesses become undefined.
 var $46MJV$depictaiutilishared = require("@depict-ai/utilishared");
 var $46MJV$solidjsweb = require("solid-js/web");
 var $46MJV$solidjs = require("solid-js");
@@ -30,10 +31,11 @@ $parcel$export(module.exports, "media_query_to_accessor", () => $beec9d22e42ed2c
 $parcel$export(module.exports, "setup_fast_leave", () => $d589470b68ce5b67$export$689e204eadb33baf);
 $parcel$export(module.exports, "show_toast", () => $b3e6a0e9382bf87e$export$5196e4c01fa56fcb);
 $parcel$export(module.exports, "solid_format_price", () => $5fc9fc23df1591db$export$469c7af753d08925);
+$parcel$export(module.exports, "connect_query_input_height_to_aligner_height", () => $94360f5c066c55b9$export$bec48a3a3ca6bc09);
 $parcel$export(module.exports, "PageReplacer", () => $37e96a5ebc768cc7$export$3ccaa27d81dd8556);
 $parcel$export(module.exports, "version", () => $ae93561d5649a847$export$83d89fbfd8236492);
 /*! Depict.ai search and product listing SDK */ 
-const $ae93561d5649a847$export$83d89fbfd8236492 = "0.0.41";
+const $ae93561d5649a847$export$83d89fbfd8236492 = "0.0.43";
 
 
 
@@ -867,7 +869,10 @@ function $8d94abc871e13baf$export$3925f87b1545cfc6({ plp_results_: plp_results_
             query_base_: query_base_,
             observe_for_counting_: observe_for_counting_,
             start_cursor_: current_cursor
-        }) : (items)=>(observe_for_counting_(items), items);
+        }) : function(items) {
+            observe_for_counting_(items);
+            return items;
+        };
         // create owner to run product cards with an Owner, so they know when they've gotten removed
         const [owner_for_cards, dispose_our_cards] = (0, $46MJV$solidjs.createRoot)((dispose)=>[
                 (0, $46MJV$solidjs.getOwner)(),
@@ -1038,7 +1043,7 @@ async function $8d94abc871e13baf$var$insert_placeholders({ scroll_restoration_da
                 {
                     page_url: "javascript:void(0)"
                 }
-            ]
+            ] // This later gets ignored and turned into `null` by the SDK functions in the @depict-ai/ui package
         });
         const element = elements?.find((e)=>e instanceof HTMLElement || e instanceof SVGElement);
         if (!element) return [];
@@ -1130,7 +1135,7 @@ function $557269f7f9c4f20e$export$6c6d7a51fa9aa15d(props) {
             await expand(0, do_duration);
         } else {
             const animation = await collapse();
-            animation.addEventListener("finish", (0, $46MJV$depictaiutilishared.catchify)(()=>details_.open = false));
+            animation?.addEventListener("finish", (0, $46MJV$depictaiutilishared.catchify)(()=>details_.open = false));
         }
     }));
     details_.addEventListener("toggle", (0, $46MJV$depictaiutilishared.catchify)(()=>{
@@ -5050,7 +5055,10 @@ function $068a627cc18f7bb6$export$e2bf8ce7779e827e({ depict_category: depict_cat
                 ...grid_spacing_override
             },
             rr_options_: {
-                template: product_card_template
+                template: (display, info)=>{
+                    const is_placeholder = info.rendering_options.type === "placeholder";
+                    return product_card_template(is_placeholder ? null : display, info);
+                }
             }
         });
     }, "Entire CategoryPage failed");
@@ -5507,12 +5515,14 @@ function $9f81b7ced87aabf2$export$7de92c4c2205ebf3({ depict_api_: depict_api_ ,
         const rendering_result = await (await (0, $46MJV$depictaiutilishared.make_placeholder_rr)({
             // render the max amount of elements that there could be, to make sure scroll restoration works (placeholders can't be shorter than actual content)
             num_items: (0, $39d15a684cb3e309$export$6c9030e511152266) + (0, $46MJV$solidjs.untrack)(get_showing_recommendation_rows) * Math.max(...layout_options_.cols_at_size.map(([per_column])=>per_column))
-        }))(tenant_object_, {
+        }))(tenant_object_, // @ts-ignore - make_placeholder_rr types is a touchy subject
+        {
             type: "search_recs",
             recs: recs_promise,
             ...rr_options_,
             ...typeof rr_options_.template === "function" ? {
                 template: (...args)=>(0, $46MJV$solidjs.runWithOwner)(owner_for_cards, ()=>// give template the possibility to know when it gets removed from the DOM by using solid-js onCleanup
+                        // @ts-ignore
                         rr_options_.template(...args))
             } : {}
         });
@@ -5672,7 +5682,7 @@ function $ad118c2ba257d9b7$export$84bba84a7b837187(search_query) {
         if (ls[key] !== json_encoded) ls[key] = json_encoded;
     }));
     (0, $46MJV$solidjs.createComputed)((0, $46MJV$depictaiutilishared.catchify)(()=>{
-        const searches = (0, $46MJV$solidjs.untrack)((0, $46MJV$depictaiutilishared.catchify)(()=>read_previous_searches()));
+        const searches = (0, $46MJV$solidjs.untrack)(read_previous_searches);
         const current_query = read_search_query();
         if (!current_query) // don't save no query in history
         return;
@@ -7343,6 +7353,29 @@ function $93779a41dce11249$export$a54ec244c8863715(opts) {
 
 
 
+
+function $94360f5c066c55b9$export$bec48a3a3ca6bc09(aligner) {
+    const style_element = document.createElement("style");
+    document.head.append(style_element);
+    const resize_observer = new ResizeObserver((0, $46MJV$depictaiutilishared.catchify)(()=>{
+        const styles = (0, $d3c94b3b96557917$export$1233ca167bf71f9a)({
+            ".depict.plp .depict-search-modal .query-input": {
+                "height": `${aligner?.clientHeight}px`
+            }
+        });
+        style_element.replaceChildren(styles);
+    }));
+    resize_observer.observe(aligner);
+    const cleanup = ()=>{
+        resize_observer.disconnect();
+        style_element.remove();
+    };
+    return {
+        cleanup: cleanup
+    };
+}
+
+
 const $79fbf145b15af988$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<div class="depict plp search"></div>`, 2);
 /**
  * Type for the private properties that are shared between the different exported search SDK wrapper functions. SDK users are not allowed to change/access these, they're an internal implementation detail.
@@ -7629,7 +7662,10 @@ function $79fbf145b15af988$export$f2dc7e4e4aa11abb({ depict_search: depict_searc
                 width_: 6.46
             }),
             rr_options_: {
-                template: product_card_template,
+                template: (display, info)=>{
+                    const is_placeholder = info.rendering_options.type === "placeholder";
+                    return product_card_template(is_placeholder ? null : display, info);
+                },
                 pre_processors: extra_depict_options?.pre_processors,
                 post_processors: extra_depict_options?.post_processors
             },
@@ -7658,35 +7694,29 @@ function $79fbf145b15af988$export$b94867ecbd698f21({ depict_search: depict_searc
             },
             disabled_: true,
             field_element_ref_: (field)=>{
-                const handler = click_handler ?? (0, $46MJV$depictaiutilishared.catchify)(()=>{
+                const style_props_ = (0, $46MJV$solidjs.createSignal)({
+                    position: "fixed"
+                });
+                const defaultHandler = (0, $46MJV$depictaiutilishared.catchify)(()=>{
+                    const { cleanup: cleanup  } = $79fbf145b15af988$var$align_field_modal(style_props_, field, aligner_ref);
+                    const complete_modal_dispose_handler = ()=>{
+                        modal_dispose_handler?.();
+                        cleanup();
+                    };
                     depict_search.modal_open = [
                         {
                             style_props_: style_props_
                         },
-                        modal_dispose_handler
+                        complete_modal_dispose_handler
                     ];
                 });
+                const handler = click_handler ?? defaultHandler;
                 field.addEventListener("click", handler);
-                (0, $46MJV$solidjs.onCleanup)(()=>field.removeEventListener("click", handler));
+                (0, $46MJV$solidjs.onCleanup)(()=>{
+                    field.removeEventListener("click", handler);
+                });
             }
         });
-        const style_props_ = (0, $46MJV$solidjs.createSignal)({
-            position: "fixed"
-        });
-        if (aligner_ref) {
-            const style_element = document.createElement("style");
-            document.head.append(style_element);
-            const resize_observer = new ResizeObserver((0, $46MJV$depictaiutilishared.catchify)(()=>{
-                const styles = (0, $d3c94b3b96557917$export$1233ca167bf71f9a)({
-                    ".depict.plp .depict-search-modal .query-input": {
-                        "height": `${aligner_ref?.clientHeight}px`
-                    }
-                });
-                style_element.replaceChildren(styles);
-            }));
-            resize_observer.observe(aligner_ref);
-            (0, $67b60b572b7b7059$export$b3ad617e9036868)(style_props_, aligner_ref, undefined, false, "top");
-        } else (0, $67b60b572b7b7059$export$b3ad617e9036868)(style_props_, input);
         return [
             (()=>{
                 const _el$ = $79fbf145b15af988$var$_tmpl$.cloneNode(true);
@@ -7697,6 +7727,25 @@ function $79fbf145b15af988$export$b94867ecbd698f21({ depict_search: depict_searc
         ];
     }, "SearchField failed");
 }
+function $79fbf145b15af988$var$align_field_modal(style_props_, input, aligner_ref) {
+    return (0, $46MJV$solidjs.createRoot)((dispose)=>{
+        if (aligner_ref) {
+            const { cleanup: cleanup  } = (0, $94360f5c066c55b9$export$bec48a3a3ca6bc09)(aligner_ref);
+            (0, $67b60b572b7b7059$export$b3ad617e9036868)(style_props_, aligner_ref, undefined, false, "top");
+            return {
+                cleanup: ()=>{
+                    cleanup();
+                    dispose();
+                }
+            };
+        } else {
+            (0, $67b60b572b7b7059$export$b3ad617e9036868)(style_props_, input);
+            return {
+                cleanup: dispose
+            };
+        }
+    });
+}
 
 
 
@@ -7757,6 +7806,7 @@ function $d589470b68ce5b67$export$689e204eadb33baf(pr) {
 
 
 
+
 class $37e96a5ebc768cc7$export$3ccaa27d81dd8556 extends EventTarget {
     #stop_listening;
     #disconnect_observer;

package/dist/module.js

@@ -1,9 +1,10 @@
+const process = { env: {} }; // In case that the code using this wasn't built with "node emulation", just make process.env accesses become undefined.
 import {dlog as $g9l4l$dlog, fetch_recs as $g9l4l$fetch_recs, snakeCasifyObject as $g9l4l$snakeCasifyObject, GenericSliderArrowButton as $g9l4l$GenericSliderArrowButton, catchify as $g9l4l$catchify, base_url as $g9l4l$base_url, get_depict_id as $g9l4l$get_depict_id, get_user_id as $g9l4l$get_user_id, get_session_id as $g9l4l$get_session_id, make_url_with_query_params as $g9l4l$make_url_with_query_params, fetch_retry as $g9l4l$fetch_retry, sort_obj as $g9l4l$sort_obj, version as $g9l4l$version, Tenant as $g9l4l$Tenant, Placeholder as $g9l4l$Placeholder, report as $g9l4l$report, javascript_media_query as $g9l4l$javascript_media_query, standard_price_format as $g9l4l$standard_price_format, deparallelize_no_drop as $g9l4l$deparallelize_no_drop, default_rr as $g9l4l$default_rr, make_random_classname as $g9l4l$make_random_classname, n_col_styling_with_dist as $g9l4l$n_col_styling_with_dist, observer as $g9l4l$observer, Lazyfier as $g9l4l$Lazyfier, queueMacroTask as $g9l4l$queueMacroTask, deparallelize as $g9l4l$deparallelize, Rec_Renderer as $g9l4l$Rec_Renderer, CrossIcon as $g9l4l$CrossIcon, useExpandingContainer as $g9l4l$useExpandingContainer, Amazing_Slider as $g9l4l$Amazing_Slider, slider_snap_css as $g9l4l$slider_snap_css, slider_fading_factory as $g9l4l$slider_fading_factory, MinusIcon as $g9l4l$MinusIcon, FilterIcon as $g9l4l$FilterIcon, SortIconAsc as $g9l4l$SortIconAsc, SortIconDesc as $g9l4l$SortIconDesc, PlusIcon as $g9l4l$PlusIcon, TickIcon as $g9l4l$TickIcon, ArrowUp as $g9l4l$ArrowUp, normal_get_product_id as $g9l4l$normal_get_product_id, ContainedPlaceholderImage as $g9l4l$ContainedPlaceholderImage, BackIcon as $g9l4l$BackIcon, SearchIcon as $g9l4l$SearchIcon, Layout as $g9l4l$Layout, make_placeholder_rr as $g9l4l$make_placeholder_rr, async_iterable_ipns as $g9l4l$async_iterable_ipns, make_asyncIterable_exiter as $g9l4l$make_asyncIterable_exiter, href_change_ipns as $g9l4l$href_change_ipns, depict_click as $g9l4l$depict_click, impression_track_element as $g9l4l$impression_track_element, add_new_tab_listener as $g9l4l$add_new_tab_listener, ContainedImage as $g9l4l$ContainedImage, buildThresholdList as $g9l4l$buildThresholdList, PreviousSearchIcon as $g9l4l$PreviousSearchIcon, insert_surfaces as $g9l4l$insert_surfaces} from "@depict-ai/utilishared";
 import {template as $g9l4l$template, insert as $g9l4l$insert, effect as $g9l4l$effect, setAttribute as $g9l4l$setAttribute, createComponent as $g9l4l$createComponent, use as $g9l4l$use, addEventListener as $g9l4l$addEventListener, delegateEvents as $g9l4l$delegateEvents, spread as $g9l4l$spread, memo as $g9l4l$memo, style as $g9l4l$style, mergeProps as $g9l4l$mergeProps, classList as $g9l4l$classList, className as $g9l4l$className} from "solid-js/web";
 import {createSignal as $g9l4l$createSignal, onCleanup as $g9l4l$onCleanup, createComputed as $g9l4l$createComputed, createEffect as $g9l4l$createEffect, untrack as $g9l4l$untrack, batch as $g9l4l$batch, createResource as $g9l4l$createResource, createMemo as $g9l4l$createMemo, Show as $g9l4l$Show, createRenderEffect as $g9l4l$createRenderEffect, runWithOwner as $g9l4l$runWithOwner, createRoot as $g9l4l$createRoot, getOwner as $g9l4l$getOwner, on as $g9l4l$on, Index as $g9l4l$Index, For as $g9l4l$For, ErrorBoundary as $g9l4l$ErrorBoundary} from "solid-js";
 
 /*! Depict.ai search and product listing SDK */ 
-const $18bf1d29fb889cca$export$83d89fbfd8236492 = "0.0.41";
+const $18bf1d29fb889cca$export$83d89fbfd8236492 = "0.0.43";
 
 
 
@@ -837,7 +838,10 @@ function $57363319986950eb$export$3925f87b1545cfc6({ plp_results_: plp_results_
             query_base_: query_base_,
             observe_for_counting_: observe_for_counting_,
             start_cursor_: current_cursor
-        }) : (items)=>(observe_for_counting_(items), items);
+        }) : function(items) {
+            observe_for_counting_(items);
+            return items;
+        };
         // create owner to run product cards with an Owner, so they know when they've gotten removed
         const [owner_for_cards, dispose_our_cards] = (0, $g9l4l$createRoot)((dispose)=>[
                 (0, $g9l4l$getOwner)(),
@@ -1008,7 +1012,7 @@ async function $57363319986950eb$var$insert_placeholders({ scroll_restoration_da
                 {
                     page_url: "javascript:void(0)"
                 }
-            ]
+            ] // This later gets ignored and turned into `null` by the SDK functions in the @depict-ai/ui package
         });
         const element = elements?.find((e)=>e instanceof HTMLElement || e instanceof SVGElement);
         if (!element) return [];
@@ -1100,7 +1104,7 @@ function $7d4ae726763dc6bc$export$6c6d7a51fa9aa15d(props) {
             await expand(0, do_duration);
         } else {
             const animation = await collapse();
-            animation.addEventListener("finish", (0, $g9l4l$catchify)(()=>details_.open = false));
+            animation?.addEventListener("finish", (0, $g9l4l$catchify)(()=>details_.open = false));
         }
     }));
     details_.addEventListener("toggle", (0, $g9l4l$catchify)(()=>{
@@ -5020,7 +5024,10 @@ function $ec52ef1e6c117813$export$e2bf8ce7779e827e({ depict_category: depict_cat
                 ...grid_spacing_override
             },
             rr_options_: {
-                template: product_card_template
+                template: (display, info)=>{
+                    const is_placeholder = info.rendering_options.type === "placeholder";
+                    return product_card_template(is_placeholder ? null : display, info);
+                }
             }
         });
     }, "Entire CategoryPage failed");
@@ -5477,12 +5484,14 @@ function $aee0c68312d971f4$export$7de92c4c2205ebf3({ depict_api_: depict_api_ ,
         const rendering_result = await (await (0, $g9l4l$make_placeholder_rr)({
             // render the max amount of elements that there could be, to make sure scroll restoration works (placeholders can't be shorter than actual content)
             num_items: (0, $9679915780ee67c0$export$6c9030e511152266) + (0, $g9l4l$untrack)(get_showing_recommendation_rows) * Math.max(...layout_options_.cols_at_size.map(([per_column])=>per_column))
-        }))(tenant_object_, {
+        }))(tenant_object_, // @ts-ignore - make_placeholder_rr types is a touchy subject
+        {
             type: "search_recs",
             recs: recs_promise,
             ...rr_options_,
             ...typeof rr_options_.template === "function" ? {
                 template: (...args)=>(0, $g9l4l$runWithOwner)(owner_for_cards, ()=>// give template the possibility to know when it gets removed from the DOM by using solid-js onCleanup
+                        // @ts-ignore
                         rr_options_.template(...args))
             } : {}
         });
@@ -5642,7 +5651,7 @@ function $4d62f5daa51642fe$export$84bba84a7b837187(search_query) {
         if (ls[key] !== json_encoded) ls[key] = json_encoded;
     }));
     (0, $g9l4l$createComputed)((0, $g9l4l$catchify)(()=>{
-        const searches = (0, $g9l4l$untrack)((0, $g9l4l$catchify)(()=>read_previous_searches()));
+        const searches = (0, $g9l4l$untrack)(read_previous_searches);
         const current_query = read_search_query();
         if (!current_query) // don't save no query in history
         return;
@@ -7313,6 +7322,29 @@ function $b76e8f62b1f313ef$export$a54ec244c8863715(opts) {
 
 
 
+
+function $9783d52321be38fe$export$bec48a3a3ca6bc09(aligner) {
+    const style_element = document.createElement("style");
+    document.head.append(style_element);
+    const resize_observer = new ResizeObserver((0, $g9l4l$catchify)(()=>{
+        const styles = (0, $246aa49a8f85c7f3$export$1233ca167bf71f9a)({
+            ".depict.plp .depict-search-modal .query-input": {
+                "height": `${aligner?.clientHeight}px`
+            }
+        });
+        style_element.replaceChildren(styles);
+    }));
+    resize_observer.observe(aligner);
+    const cleanup = ()=>{
+        resize_observer.disconnect();
+        style_element.remove();
+    };
+    return {
+        cleanup: cleanup
+    };
+}
+
+
 const $540e930c58500cbe$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$g9l4l$template)(`<div class="depict plp search"></div>`, 2);
 /**
  * Type for the private properties that are shared between the different exported search SDK wrapper functions. SDK users are not allowed to change/access these, they're an internal implementation detail.
@@ -7599,7 +7631,10 @@ function $540e930c58500cbe$export$f2dc7e4e4aa11abb({ depict_search: depict_searc
                 width_: 6.46
             }),
             rr_options_: {
-                template: product_card_template,
+                template: (display, info)=>{
+                    const is_placeholder = info.rendering_options.type === "placeholder";
+                    return product_card_template(is_placeholder ? null : display, info);
+                },
                 pre_processors: extra_depict_options?.pre_processors,
                 post_processors: extra_depict_options?.post_processors
             },
@@ -7628,35 +7663,29 @@ function $540e930c58500cbe$export$b94867ecbd698f21({ depict_search: depict_searc
             },
             disabled_: true,
             field_element_ref_: (field)=>{
-                const handler = click_handler ?? (0, $g9l4l$catchify)(()=>{
+                const style_props_ = (0, $g9l4l$createSignal)({
+                    position: "fixed"
+                });
+                const defaultHandler = (0, $g9l4l$catchify)(()=>{
+                    const { cleanup: cleanup  } = $540e930c58500cbe$var$align_field_modal(style_props_, field, aligner_ref);
+                    const complete_modal_dispose_handler = ()=>{
+                        modal_dispose_handler?.();
+                        cleanup();
+                    };
                     depict_search.modal_open = [
                         {
                             style_props_: style_props_
                         },
-                        modal_dispose_handler
+                        complete_modal_dispose_handler
                     ];
                 });
+                const handler = click_handler ?? defaultHandler;
                 field.addEventListener("click", handler);
-                (0, $g9l4l$onCleanup)(()=>field.removeEventListener("click", handler));
+                (0, $g9l4l$onCleanup)(()=>{
+                    field.removeEventListener("click", handler);
+                });
             }
         });
-        const style_props_ = (0, $g9l4l$createSignal)({
-            position: "fixed"
-        });
-        if (aligner_ref) {
-            const style_element = document.createElement("style");
-            document.head.append(style_element);
-            const resize_observer = new ResizeObserver((0, $g9l4l$catchify)(()=>{
-                const styles = (0, $246aa49a8f85c7f3$export$1233ca167bf71f9a)({
-                    ".depict.plp .depict-search-modal .query-input": {
-                        "height": `${aligner_ref?.clientHeight}px`
-                    }
-                });
-                style_element.replaceChildren(styles);
-            }));
-            resize_observer.observe(aligner_ref);
-            (0, $079defea521d5e2a$export$b3ad617e9036868)(style_props_, aligner_ref, undefined, false, "top");
-        } else (0, $079defea521d5e2a$export$b3ad617e9036868)(style_props_, input);
         return [
             (()=>{
                 const _el$ = $540e930c58500cbe$var$_tmpl$.cloneNode(true);
@@ -7667,6 +7696,25 @@ function $540e930c58500cbe$export$b94867ecbd698f21({ depict_search: depict_searc
         ];
     }, "SearchField failed");
 }
+function $540e930c58500cbe$var$align_field_modal(style_props_, input, aligner_ref) {
+    return (0, $g9l4l$createRoot)((dispose)=>{
+        if (aligner_ref) {
+            const { cleanup: cleanup  } = (0, $9783d52321be38fe$export$bec48a3a3ca6bc09)(aligner_ref);
+            (0, $079defea521d5e2a$export$b3ad617e9036868)(style_props_, aligner_ref, undefined, false, "top");
+            return {
+                cleanup: ()=>{
+                    cleanup();
+                    dispose();
+                }
+            };
+        } else {
+            (0, $079defea521d5e2a$export$b3ad617e9036868)(style_props_, input);
+            return {
+                cleanup: dispose
+            };
+        }
+    });
+}
 
 
 
@@ -7727,6 +7775,7 @@ function $36316d7b4c897a03$export$689e204eadb33baf(pr) {
 
 
 
+
 class $ba6c9609228edf6b$export$3ccaa27d81dd8556 extends EventTarget {
     #stop_listening;
     #disconnect_observer;
@@ -7827,4 +7876,4 @@ class $ba6c9609228edf6b$export$3ccaa27d81dd8556 extends EventTarget {
 (0, $g9l4l$dlog)("@depict-ai/ui version", (0, $18bf1d29fb889cca$export$83d89fbfd8236492));
 
 
-export {$e95f1855a5e3864f$export$58e808b1db15d3bc as fetchDepictRecommendations, $ec52ef1e6c117813$export$de035477d6fef996 as QuickLinks, $ec52ef1e6c117813$export$5b7c3ce0ebe51f86 as BreadCrumbs, $6340962f8bafd049$export$b91cec6bdc6b32a1 as CategoryTitle, $9b693ea3ff420de6$export$824dde41348efed1 as embedded_num_products, $80a49d3809ecb080$export$643598a327b5833e as get_categories, $ec52ef1e6c117813$export$f34314aa9505732e as DepictCategory, $ec52ef1e6c117813$export$e2bf8ce7779e827e as CategoryPage, $540e930c58500cbe$export$ac6237957a15b3f0 as DepictSearch, $540e930c58500cbe$export$bde3eb976dfded9 as get_search_query_updating_blocked_signal, $540e930c58500cbe$export$f2dc7e4e4aa11abb as SearchPage, $540e930c58500cbe$export$b94867ecbd698f21 as SearchField, $aaacfac0064e97d9$export$ee1733d9a8495996 as DefaultInstantCardPlaceholder, $079defea521d5e2a$export$b3ad617e9036868 as align_field, $246aa49a8f85c7f3$export$1233ca167bf71f9a as styles_to_valid_css_string, $a1123c5ed9b0ee29$export$fe334901e8bebd57 as disable_scrolling, $a3e81b85527bc866$export$d0596b5cae35ad4 as open_search_with_shift_slash, $972ebf2641490830$export$26df08e242fe83a3 as push_state_with_query_param_value, $3846bb34098c738f$export$e015ed2f2950f2e3 as DepictAPI, $f22123a20b6b80b3$export$2cefb7e61fcbae00 as add_to_version_info, $fefe7683325039b3$export$d9f36cf74e24d595 as media_query_to_accessor, $36316d7b4c897a03$export$689e204eadb33baf as setup_fast_leave, $886fa987db4f3805$export$5196e4c01fa56fcb as show_toast, $5178263ed1e394ca$export$469c7af753d08925 as solid_format_price, $ba6c9609228edf6b$export$3ccaa27d81dd8556 as PageReplacer, $18bf1d29fb889cca$export$83d89fbfd8236492 as version};
+export {$e95f1855a5e3864f$export$58e808b1db15d3bc as fetchDepictRecommendations, $ec52ef1e6c117813$export$de035477d6fef996 as QuickLinks, $ec52ef1e6c117813$export$5b7c3ce0ebe51f86 as BreadCrumbs, $6340962f8bafd049$export$b91cec6bdc6b32a1 as CategoryTitle, $9b693ea3ff420de6$export$824dde41348efed1 as embedded_num_products, $80a49d3809ecb080$export$643598a327b5833e as get_categories, $ec52ef1e6c117813$export$f34314aa9505732e as DepictCategory, $ec52ef1e6c117813$export$e2bf8ce7779e827e as CategoryPage, $540e930c58500cbe$export$ac6237957a15b3f0 as DepictSearch, $540e930c58500cbe$export$bde3eb976dfded9 as get_search_query_updating_blocked_signal, $540e930c58500cbe$export$f2dc7e4e4aa11abb as SearchPage, $540e930c58500cbe$export$b94867ecbd698f21 as SearchField, $aaacfac0064e97d9$export$ee1733d9a8495996 as DefaultInstantCardPlaceholder, $079defea521d5e2a$export$b3ad617e9036868 as align_field, $246aa49a8f85c7f3$export$1233ca167bf71f9a as styles_to_valid_css_string, $a1123c5ed9b0ee29$export$fe334901e8bebd57 as disable_scrolling, $a3e81b85527bc866$export$d0596b5cae35ad4 as open_search_with_shift_slash, $972ebf2641490830$export$26df08e242fe83a3 as push_state_with_query_param_value, $3846bb34098c738f$export$e015ed2f2950f2e3 as DepictAPI, $f22123a20b6b80b3$export$2cefb7e61fcbae00 as add_to_version_info, $fefe7683325039b3$export$d9f36cf74e24d595 as media_query_to_accessor, $36316d7b4c897a03$export$689e204eadb33baf as setup_fast_leave, $886fa987db4f3805$export$5196e4c01fa56fcb as show_toast, $5178263ed1e394ca$export$469c7af753d08925 as solid_format_price, $9783d52321be38fe$export$bec48a3a3ca6bc09 as connect_query_input_height_to_aligner_height, $ba6c9609228edf6b$export$3ccaa27d81dd8556 as PageReplacer, $18bf1d29fb889cca$export$83d89fbfd8236492 as version};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depict-ai/ui",
-  "version": "0.0.41",
+  "version": "0.0.43",
   "packageManager": "yarn@3.2.2",
   "source": [
     "src/index.ts",
@@ -82,7 +82,7 @@
     "ts-jest": "^29.0.3"
   },
   "dependencies": {
-    "@depict-ai/utilishared": "^0.0.39",
+    "@depict-ai/utilishared": "^0.0.41",
     "solid-js": "^1.6.2"
   },
   "types": "dist/index.d.ts"