@depict-ai/ui 0.0.42 → 0.0.44

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.42";
+export const version = "0.0.44";
 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;
@@ -300,7 +300,7 @@ export type RenderCategorySuggestion = (category_suggestion: Accessor<CategorySu
 export function connect_query_input_height_to_aligner_height(aligner: HTMLElement): {
     cleanup: () => void;
 };
-type ConstructorOptions = {
+type ConstructorOptions<T extends Display> = {
     search_query_url_param_name?: string;
     market: string;
     merchant: string;
@@ -311,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?: {
@@ -321,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;
@@ -334,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

@@ -34,7 +34,7 @@ $parcel$export(module.exports, "connect_query_input_height_to_aligner_height", (
 $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.42";
+const $ae93561d5649a847$export$83d89fbfd8236492 = "0.0.44";
 
 
 
@@ -868,7 +868,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)(),
@@ -1039,7 +1042,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 [];
@@ -1131,7 +1134,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)(()=>{
@@ -5051,7 +5054,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");
@@ -5508,12 +5514,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))
             } : {}
         });
@@ -5673,7 +5681,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;
@@ -7653,7 +7661,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
             },
@@ -7685,20 +7696,23 @@ function $79fbf145b15af988$export$b94867ecbd698f21({ depict_search: depict_searc
                 const style_props_ = (0, $46MJV$solidjs.createSignal)({
                     position: "fixed"
                 });
-                const { cleanup: align_field_cleanup  } = $79fbf145b15af988$var$align_field_modal(style_props_, field, aligner_ref);
                 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);
-                    align_field_cleanup?.();
                 });
             }
         });
@@ -7713,18 +7727,23 @@ function $79fbf145b15af988$export$b94867ecbd698f21({ depict_search: depict_searc
     }, "SearchField failed");
 }
 function $79fbf145b15af988$var$align_field_modal(style_props_, input, aligner_ref) {
-    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
-        };
-    } else {
-        (0, $67b60b572b7b7059$export$b3ad617e9036868)(style_props_, input);
-        return {
-            cleanup: null
-        };
-    }
+    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
+            };
+        }
+    });
 }
 
 

package/dist/module.js

@@ -3,7 +3,7 @@ import {template as $g9l4l$template, insert as $g9l4l$insert, effect as $g9l4l$e
 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.42";
+const $18bf1d29fb889cca$export$83d89fbfd8236492 = "0.0.44";
 
 
 
@@ -837,7 +837,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 +1011,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 +1103,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 +5023,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 +5483,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 +5650,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;
@@ -7622,7 +7630,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
             },
@@ -7654,20 +7665,23 @@ function $540e930c58500cbe$export$b94867ecbd698f21({ depict_search: depict_searc
                 const style_props_ = (0, $g9l4l$createSignal)({
                     position: "fixed"
                 });
-                const { cleanup: align_field_cleanup  } = $540e930c58500cbe$var$align_field_modal(style_props_, field, aligner_ref);
                 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);
-                    align_field_cleanup?.();
                 });
             }
         });
@@ -7682,18 +7696,23 @@ function $540e930c58500cbe$export$b94867ecbd698f21({ depict_search: depict_searc
     }, "SearchField failed");
 }
 function $540e930c58500cbe$var$align_field_modal(style_props_, input, aligner_ref) {
-    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
-        };
-    } else {
-        (0, $079defea521d5e2a$export$b3ad617e9036868)(style_props_, input);
-        return {
-            cleanup: null
-        };
-    }
+    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
+            };
+        }
+    });
 }
 
 

package/package.json

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