@depict-ai/ui 0.0.5 → 0.0.7

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { Accessor, JSX, Setter, Signal } from "solid-js";
-import { Display, Node_Array, Elem, Extended_RR_Options, LayoutOptions, TwoLetterMarket } from "@depict-ai/utilishared";
+import { Display, Node_Array, Elem, Extended_RR_Options, LayoutOptions, TwoLetterMarket, RR_PostProcessor, RR_PreProcessor } from "@depict-ai/utilishared";
 import { SearchResponse } from "@depict-ai/types/api/SearchResponse";
 import { SearchRequest, SearchFilter } from "@depict-ai/types/api/SearchRequest";
 import { BaseSearchRequest } from "@depict-ai/types/api/BaseSearchRequest";
@@ -1236,6 +1236,9 @@ type _ConstructorOptions1 = {
     on_navigation?: (href: string) => unknown;
     url_transformer?: (url_object: URL) => unknown;
     enable_category_suggestions?: boolean;
+    disable_scrolling_during_modal?: boolean;
+    api?: DepictAPI;
+    bottom_distance_under_modal_?: Accessor<number | undefined>;
 };
 type OpenModalArguments = [
     options_for_modal?: {
@@ -1252,7 +1255,7 @@ type SDKGridSpacing = string | {
 export const get_search_query_updating_blocked_signal: (depict_search: DepictSearch) => Signal<boolean> | undefined;
 export class DepictSearch {
     #private;
-    constructor({ search_query_url_param_name, url_transformer, on_navigation, enable_category_suggestions, ...props_on_class }: _ConstructorOptions1);
+    constructor({ search_query_url_param_name, url_transformer, on_navigation, enable_category_suggestions, disable_scrolling_during_modal, api, bottom_distance_under_modal_, ...props_on_class }: _ConstructorOptions1);
     get localization(): {
         [K in keyof search_i18n]: ReturnType<search_i18n[K]>;
     };
@@ -1266,7 +1269,7 @@ 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, }: {
+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;
     include_input_field?: boolean | {
         on_open_?: VoidFunction;
@@ -1276,8 +1279,14 @@ export function SearchPage({ depict_search, include_input_field, grid_spacing, c
     cols_at_size: SDKColsAtSize;
     product_card_template: (display: Display, info: InfoForProcessing) => Promise<Node_Array> | Node_Array;
     get_product_id: (url?: string) => string | Promise<string>;
+    extra_depict_options?: {
+        pre_processors?: RR_PreProcessor[];
+        post_processors?: RR_PostProcessor[];
+        recommendations_cols_at_size?: SDKColsAtSize;
+    };
 }): Node_Array;
-export function SearchField({ depict_search, modal_dispose_handler, }: {
+export function SearchField({ depict_search, modal_dispose_handler, click_handler, }: {
     depict_search: DepictSearch;
     modal_dispose_handler?: VoidFunction;
+    click_handler?: (this: HTMLDivElement, ev: MouseEvent) => any;
 }): Node_Array;

package/dist/main.js

@@ -7301,7 +7301,7 @@ function $036d367ce3058351$export$3340fdd8259bd4fd({ get_search_field_value_: ge
 }
 
 
-const $f40a47a30a358305$var$_tmpl$ = /*#__PURE__*/ (0, $iBTHO$solidjsweb.template)(`<div class="discover-more"><button class="major" type="button"></button></div>`, 4), $f40a47a30a358305$var$_tmpl$2 = /*#__PURE__*/ (0, $iBTHO$solidjsweb.template)(`<b></b>`, 2), $f40a47a30a358305$var$_tmpl$3 = /*#__PURE__*/ (0, $iBTHO$solidjsweb.template)(`<div class="depict-search-modal"><div class="body"><div class="padded"></div></div></div>`, 6), $f40a47a30a358305$var$_tmpl$4 = /*#__PURE__*/ (0, $iBTHO$solidjsweb.template)(`<div class="depict plp search"><div class="depict-search-modal-backdrop"></div></div>`, 4);
+const $f40a47a30a358305$var$_tmpl$ = /*#__PURE__*/ (0, $iBTHO$solidjsweb.template)(`<div class="discover-more"><button class="major" type="button"></button></div>`, 4), $f40a47a30a358305$var$_tmpl$2 = /*#__PURE__*/ (0, $iBTHO$solidjsweb.template)(`<b></b>`, 2), $f40a47a30a358305$var$_tmpl$3 = /*#__PURE__*/ (0, $iBTHO$solidjsweb.template)(`<div class="depict-search-modal"><div class="body"><div class="padded"></div></div></div>`, 6), $f40a47a30a358305$var$_tmpl$4 = /*#__PURE__*/ (0, $iBTHO$solidjsweb.template)(`<div id="depict-override" class="depict plp search"><div class="depict-search-modal-backdrop"></div></div>`, 4);
 function $f40a47a30a358305$export$1c593cbd6f1e10bc({ search_field_value_: search_field_value_ , search_query_: search_query_ , search_page_url_param_name_: search_page_url_param_name_ , previous_searches_: previous_searches_ , close_modal_: close_modal_ , style_props_: style_props_ = (0, $iBTHO$solidjs.createSignal)({}) , depict_api_: depict_api_ , tenant_: tenant_ , market_: market_ , submit_query_: submit_query_ , instant_results_options_: instant_results_options_ , register_closing_animation_: register_closing_animation_ , url_transformer_: url_transformer_ , closing_animation_: closing_animation_ , alternative_query_submitter_for_spas_: alternative_query_submitter_for_spas_ , clear_filters_: clear_filters_ , i18n_: i18n_ , disable_scrolling_: disable_scrolling_ = true , enable_category_suggestions_: enable_category_suggestions_ , class_list_: class_list_ , after_submit_: after_submit_ , bottom_distance_under_modal_: bottom_distance_under_modal_  }) {
     let on_enter_in_query_input_function;
     const [input_field, set_input_field] = (0, $iBTHO$solidjs.createSignal)();
@@ -7957,8 +7957,15 @@ function $f1d7cb69f839a526$export$a54ec244c8863715(opts) {
 
 
 
-const $ad63d2a35e827266$var$_tmpl$ = /*#__PURE__*/ (0, $iBTHO$solidjsweb.template)(`<span class="orig price"></span>`, 2), $ad63d2a35e827266$var$_tmpl$2 = /*#__PURE__*/ (0, $iBTHO$solidjsweb.template)(`<a class="instant-card"><div class="img_part"></div><div class="right_part"><div class="title_brand"><span class="brand"></span><span class="title"></span></div><div class="price_container"><span class="price"></span></div></div></a>`, 16);
-function $ad63d2a35e827266$export$3b5becc25bbaed73(display, _index, get_fake_rendering_options, i18n_) {
+const $ad63d2a35e827266$var$_tmpl$ = /*#__PURE__*/ (0, $iBTHO$solidjsweb.template)(`<span class="orig price"></span>`, 2), $ad63d2a35e827266$var$_tmpl$2 = /*#__PURE__*/ (0, $iBTHO$solidjsweb.template)(`<a class="instant-card"><div class="img_part"></div><div class="right_part"><div class="title_brand_tagline"><span class="brand"></span><span class="title"></span></div><div class="price_container"><span class="price"></span></div></div></a>`, 16), $ad63d2a35e827266$var$_tmpl$3 = /*#__PURE__*/ (0, $iBTHO$solidjsweb.template)(`<div class="tagline"></div>`, 2);
+function $ad63d2a35e827266$export$3b5becc25bbaed73(display_or_variant_container, _index, get_fake_rendering_options, i18n_) {
+    // Support for Spendrups displays, should probably be in the Spendrups script
+    const display = (0, $iBTHO$solidjs.createMemo)(()=>{
+        const display = display_or_variant_container();
+        if (display.page_url) return display;
+        if (!display?.variants?.length) return;
+        return display.variants.filter((v)=>v.product_id == display.product_id)[0];
+    });
     const image_url = (0, $iBTHO$solidjs.createMemo)(()=>display().image_url);
     const contained_image = (0, $iBTHO$solidjs.createMemo)(()=>(0, $iBTHO$depictaiutilishared.ContainedImage)({
             aspect_ratio: 1,
@@ -7977,6 +7984,14 @@ function $ad63d2a35e827266$export$3b5becc25bbaed73(display, _index, get_fake_ren
         (0, $iBTHO$solidjsweb.insert)(_el$2, contained_image);
         (0, $iBTHO$solidjsweb.insert)(_el$5, ()=>display().brand);
         (0, $iBTHO$solidjsweb.insert)(_el$6, ()=>display().title);
+        (0, $iBTHO$solidjsweb.insert)(_el$4, ()=>display().sub_heading_1 || display().sub_heading_2 && (()=>{
+                const _el$10 = $ad63d2a35e827266$var$_tmpl$3.cloneNode(true);
+                (0, $iBTHO$solidjsweb.insert)(_el$10, ()=>[
+                        display().sub_heading_1,
+                        display().sub_heading_2
+                    ].filter((v)=>v).join(" | "));
+                return _el$10;
+            })(), null);
         (0, $iBTHO$solidjsweb.insert)(_el$7, (0, $iBTHO$solidjsweb.createComponent)((0, $iBTHO$solidjs.Show), {
             get when () {
                 return is_sale();
@@ -7998,7 +8013,15 @@ function $ad63d2a35e827266$export$3b5becc25bbaed73(display, _index, get_fake_ren
                 price_formatting_: i18n_.price_formatting_
             }), null);
         (0, $iBTHO$solidjsweb.insert)(_el$9, ()=>i18n_.price_formatting_().post_, null);
-        (0, $iBTHO$solidjsweb.effect)(()=>(0, $iBTHO$solidjsweb.setAttribute)(_el$, "href", display().page_url));
+        (0, $iBTHO$solidjsweb.effect)((_p$)=>{
+            const _v$ = display().page_url, _v$2 = !!is_sale();
+            _v$ !== _p$._v$ && (0, $iBTHO$solidjsweb.setAttribute)(_el$, "href", _p$._v$ = _v$);
+            _v$2 !== _p$._v$2 && _el$9.classList.toggle("sales_price", _p$._v$2 = _v$2);
+            return _p$;
+        }, {
+            _v$: undefined,
+            _v$2: undefined
+        });
         return _el$;
     })();
 }
@@ -8102,7 +8125,8 @@ class $fd2d5ef67fc09716$export$ac6237957a15b3f0 {
     #market_signal = (0, $iBTHO$solidjs.createSignal)();
     #modal_open_signal = (0, $iBTHO$solidjs.createSignal)(false);
     static #has_been_constructed = false;
-    constructor({ search_query_url_param_name: search_query_url_param_name = "search_query" , url_transformer: url_transformer , on_navigation: on_navigation , enable_category_suggestions: enable_category_suggestions = true , ...props_on_class }){
+    constructor({ search_query_url_param_name: search_query_url_param_name = "search_query" , url_transformer: url_transformer , on_navigation: on_navigation , enable_category_suggestions: enable_category_suggestions = true , disable_scrolling_during_modal: // Stuff needed for non-standard customer deployments that we shouldn't actually expose
+    disable_scrolling_during_modal = true , api: api , bottom_distance_under_modal_: bottom_distance_under_modal_ , ...props_on_class }){
         if ($fd2d5ef67fc09716$export$ac6237957a15b3f0.#has_been_constructed) throw new Error("You can only have one instance of DepictSearch");
         Object.assign(this, props_on_class);
         const alternative_query_submitter_for_spas_ = on_navigation && ((search_param_name, new_search_query, url_transformer)=>{
@@ -8129,7 +8153,7 @@ class $fd2d5ef67fc09716$export$ac6237957a15b3f0 {
             [search_query_url_param_name]: ""
         });
         const search_query_signal_ = (0, $iBTHO$solidjs.createSignal)((0, $iBTHO$solidjs.untrack)(raw_search_query_signal[0]));
-        const depict_api_ = new (0, $e1d6c0f3d89d531c$export$e015ed2f2950f2e3)();
+        const depict_api_ = api ?? new (0, $e1d6c0f3d89d531c$export$e015ed2f2950f2e3)();
         const previous_searches = (0, $2b7a005a65221045$export$84bba84a7b837187)(search_query_signal_);
         const [, set_search_showing_recommendation_rows] = state_.search_showing_recommendation_rows;
         const after_submit_ = ()=>set_search_showing_recommendation_rows((0, $fb29c6201c369e39$export$1c8c715550dc689d)); // do this every time after we have submitted a new query - otherwise there might already be a saved number of rows in the state
@@ -8199,7 +8223,9 @@ class $fd2d5ef67fc09716$export$ac6237957a15b3f0 {
                     has_sort_or_filters_: (0, $iBTHO$solidjs.createMemo)(()=>!!(Object.keys(state_.search_selected_filters[0]())?.length || state_.search_sorting[0]()))
                 },
                 i18n_: i18n_,
-                enable_category_suggestions_: enable_category_suggestions
+                enable_category_suggestions_: enable_category_suggestions,
+                disable_scrolling_: disable_scrolling_during_modal,
+                bottom_distance_under_modal_: bottom_distance_under_modal_
             });
             // This will add some default behaviour to open_modal_ if no style_props_ are supplied
             // The default behaviour is to align the modal with the input field if possible
@@ -8297,8 +8323,14 @@ function $fd2d5ef67fc09716$var$get_shared_properties(depict_search) {
     if (!shared_properties) throw new Error("Can't connect to provided DepictSearch instance");
     return shared_properties;
 }
-function $fd2d5ef67fc09716$export$f2dc7e4e4aa11abb({ depict_search: depict_search , include_input_field: include_input_field , grid_spacing: grid_spacing , cols_at_size: cols_at_size , product_card_template: product_card_template , get_product_id: get_product_id = (0, $iBTHO$depictaiutilishared.normal_get_product_id)  }) {
+function $fd2d5ef67fc09716$export$f2dc7e4e4aa11abb({ depict_search: depict_search , include_input_field: include_input_field , grid_spacing: grid_spacing , cols_at_size: cols_at_size , product_card_template: product_card_template , get_product_id: get_product_id = (0, $iBTHO$depictaiutilishared.normal_get_product_id) , extra_depict_options: extra_depict_options  }) {
     const shared_properties = $fd2d5ef67fc09716$var$get_shared_properties(depict_search);
+    const grid_spacing_override = typeof grid_spacing === "string" ? {
+        grid_spacing: grid_spacing
+    } : {
+        override_vertical_spacing: grid_spacing.vertical,
+        grid_spacing: grid_spacing.horizontal
+    };
     return $fd2d5ef67fc09716$var$run_in_root_or_auto_cleanup(()=>{
         const { state_: state_  } = shared_properties;
         (0, $iBTHO$solidjs.onCleanup)(shared_properties.reset_history_state_);
@@ -8348,25 +8380,26 @@ function $fd2d5ef67fc09716$export$f2dc7e4e4aa11abb({ depict_search: depict_searc
             include_input_field_: include_input_field,
             layout_options_: {
                 cols_at_size: (0, $4e04be41243c3d80$export$6daf8749b65a1b77)(cols_at_size),
-                ...typeof grid_spacing === "string" ? {
-                    grid_spacing: grid_spacing
-                } : {
-                    override_vertical_spacing: grid_spacing.vertical,
-                    grid_spacing: grid_spacing.horizontal
-                }
+                ...grid_spacing_override
             },
+            recommendations_layout_options_: extra_depict_options?.recommendations_cols_at_size ? {
+                cols_at_size: (0, $4e04be41243c3d80$export$6daf8749b65a1b77)(extra_depict_options.recommendations_cols_at_size),
+                ...grid_spacing_override
+            } : undefined,
             slider_arrow_button_: (0, $iBTHO$depictaiutilishared.GenericSliderArrowButton)({
                 height_: 12,
                 width_: 6.46
             }),
             rr_options_: {
-                template: product_card_template
+                template: product_card_template,
+                pre_processors: extra_depict_options?.pre_processors,
+                post_processors: extra_depict_options?.post_processors
             },
             get_product_id_: get_product_id
         });
     }, "Entire SearchPage failed");
 }
-function $fd2d5ef67fc09716$export$b94867ecbd698f21({ depict_search: depict_search , modal_dispose_handler: modal_dispose_handler  }) {
+function $fd2d5ef67fc09716$export$b94867ecbd698f21({ depict_search: depict_search , modal_dispose_handler: modal_dispose_handler , click_handler: click_handler  }) {
     const shared_properties = $fd2d5ef67fc09716$var$get_shared_properties(depict_search);
     return $fd2d5ef67fc09716$var$run_in_root_or_auto_cleanup(()=>{
         const input = (0, $iBTHO$solidjsweb.createComponent)((0, $2f8c7dc07090fca9$export$ff21851bb5d30e15), {
@@ -8387,7 +8420,7 @@ function $fd2d5ef67fc09716$export$b94867ecbd698f21({ depict_search: depict_searc
             },
             disabled_: true,
             field_element_ref_: (field)=>{
-                const handler = (0, $iBTHO$depictaiutilishared.catchify)(()=>{
+                const handler = click_handler ?? (0, $iBTHO$depictaiutilishared.catchify)(()=>{
                     depict_search.modal_open = [
                         {
                             style_props_: style_props_

package/dist/module.js

@@ -7252,7 +7252,7 @@ function $c64d28ca12452b21$export$3340fdd8259bd4fd({ get_search_field_value_: ge
 }
 
 
-const $fabfda1230351b1a$var$_tmpl$ = /*#__PURE__*/ (0, $kyEB6$template)(`<div class="discover-more"><button class="major" type="button"></button></div>`, 4), $fabfda1230351b1a$var$_tmpl$2 = /*#__PURE__*/ (0, $kyEB6$template)(`<b></b>`, 2), $fabfda1230351b1a$var$_tmpl$3 = /*#__PURE__*/ (0, $kyEB6$template)(`<div class="depict-search-modal"><div class="body"><div class="padded"></div></div></div>`, 6), $fabfda1230351b1a$var$_tmpl$4 = /*#__PURE__*/ (0, $kyEB6$template)(`<div class="depict plp search"><div class="depict-search-modal-backdrop"></div></div>`, 4);
+const $fabfda1230351b1a$var$_tmpl$ = /*#__PURE__*/ (0, $kyEB6$template)(`<div class="discover-more"><button class="major" type="button"></button></div>`, 4), $fabfda1230351b1a$var$_tmpl$2 = /*#__PURE__*/ (0, $kyEB6$template)(`<b></b>`, 2), $fabfda1230351b1a$var$_tmpl$3 = /*#__PURE__*/ (0, $kyEB6$template)(`<div class="depict-search-modal"><div class="body"><div class="padded"></div></div></div>`, 6), $fabfda1230351b1a$var$_tmpl$4 = /*#__PURE__*/ (0, $kyEB6$template)(`<div id="depict-override" class="depict plp search"><div class="depict-search-modal-backdrop"></div></div>`, 4);
 function $fabfda1230351b1a$export$1c593cbd6f1e10bc({ search_field_value_: search_field_value_ , search_query_: search_query_ , search_page_url_param_name_: search_page_url_param_name_ , previous_searches_: previous_searches_ , close_modal_: close_modal_ , style_props_: style_props_ = (0, $kyEB6$createSignal)({}) , depict_api_: depict_api_ , tenant_: tenant_ , market_: market_ , submit_query_: submit_query_ , instant_results_options_: instant_results_options_ , register_closing_animation_: register_closing_animation_ , url_transformer_: url_transformer_ , closing_animation_: closing_animation_ , alternative_query_submitter_for_spas_: alternative_query_submitter_for_spas_ , clear_filters_: clear_filters_ , i18n_: i18n_ , disable_scrolling_: disable_scrolling_ = true , enable_category_suggestions_: enable_category_suggestions_ , class_list_: class_list_ , after_submit_: after_submit_ , bottom_distance_under_modal_: bottom_distance_under_modal_  }) {
     let on_enter_in_query_input_function;
     const [input_field, set_input_field] = (0, $kyEB6$createSignal)();
@@ -7908,8 +7908,15 @@ function $7097477c78a89208$export$a54ec244c8863715(opts) {
 
 
 
-const $ba4105f38be0a8e0$var$_tmpl$ = /*#__PURE__*/ (0, $kyEB6$template)(`<span class="orig price"></span>`, 2), $ba4105f38be0a8e0$var$_tmpl$2 = /*#__PURE__*/ (0, $kyEB6$template)(`<a class="instant-card"><div class="img_part"></div><div class="right_part"><div class="title_brand"><span class="brand"></span><span class="title"></span></div><div class="price_container"><span class="price"></span></div></div></a>`, 16);
-function $ba4105f38be0a8e0$export$3b5becc25bbaed73(display, _index, get_fake_rendering_options, i18n_) {
+const $ba4105f38be0a8e0$var$_tmpl$ = /*#__PURE__*/ (0, $kyEB6$template)(`<span class="orig price"></span>`, 2), $ba4105f38be0a8e0$var$_tmpl$2 = /*#__PURE__*/ (0, $kyEB6$template)(`<a class="instant-card"><div class="img_part"></div><div class="right_part"><div class="title_brand_tagline"><span class="brand"></span><span class="title"></span></div><div class="price_container"><span class="price"></span></div></div></a>`, 16), $ba4105f38be0a8e0$var$_tmpl$3 = /*#__PURE__*/ (0, $kyEB6$template)(`<div class="tagline"></div>`, 2);
+function $ba4105f38be0a8e0$export$3b5becc25bbaed73(display_or_variant_container, _index, get_fake_rendering_options, i18n_) {
+    // Support for Spendrups displays, should probably be in the Spendrups script
+    const display = (0, $kyEB6$createMemo)(()=>{
+        const display = display_or_variant_container();
+        if (display.page_url) return display;
+        if (!display?.variants?.length) return;
+        return display.variants.filter((v)=>v.product_id == display.product_id)[0];
+    });
     const image_url = (0, $kyEB6$createMemo)(()=>display().image_url);
     const contained_image = (0, $kyEB6$createMemo)(()=>(0, $kyEB6$ContainedImage)({
             aspect_ratio: 1,
@@ -7928,6 +7935,14 @@ function $ba4105f38be0a8e0$export$3b5becc25bbaed73(display, _index, get_fake_ren
         (0, $kyEB6$insert)(_el$2, contained_image);
         (0, $kyEB6$insert)(_el$5, ()=>display().brand);
         (0, $kyEB6$insert)(_el$6, ()=>display().title);
+        (0, $kyEB6$insert)(_el$4, ()=>display().sub_heading_1 || display().sub_heading_2 && (()=>{
+                const _el$10 = $ba4105f38be0a8e0$var$_tmpl$3.cloneNode(true);
+                (0, $kyEB6$insert)(_el$10, ()=>[
+                        display().sub_heading_1,
+                        display().sub_heading_2
+                    ].filter((v)=>v).join(" | "));
+                return _el$10;
+            })(), null);
         (0, $kyEB6$insert)(_el$7, (0, $kyEB6$createComponent)((0, $kyEB6$Show), {
             get when () {
                 return is_sale();
@@ -7949,7 +7964,15 @@ function $ba4105f38be0a8e0$export$3b5becc25bbaed73(display, _index, get_fake_ren
                 price_formatting_: i18n_.price_formatting_
             }), null);
         (0, $kyEB6$insert)(_el$9, ()=>i18n_.price_formatting_().post_, null);
-        (0, $kyEB6$effect)(()=>(0, $kyEB6$setAttribute)(_el$, "href", display().page_url));
+        (0, $kyEB6$effect)((_p$)=>{
+            const _v$ = display().page_url, _v$2 = !!is_sale();
+            _v$ !== _p$._v$ && (0, $kyEB6$setAttribute)(_el$, "href", _p$._v$ = _v$);
+            _v$2 !== _p$._v$2 && _el$9.classList.toggle("sales_price", _p$._v$2 = _v$2);
+            return _p$;
+        }, {
+            _v$: undefined,
+            _v$2: undefined
+        });
         return _el$;
     })();
 }
@@ -8053,7 +8076,8 @@ class $59f48be661ca9195$export$ac6237957a15b3f0 {
     #market_signal = (0, $kyEB6$createSignal)();
     #modal_open_signal = (0, $kyEB6$createSignal)(false);
     static #has_been_constructed = false;
-    constructor({ search_query_url_param_name: search_query_url_param_name = "search_query" , url_transformer: url_transformer , on_navigation: on_navigation , enable_category_suggestions: enable_category_suggestions = true , ...props_on_class }){
+    constructor({ search_query_url_param_name: search_query_url_param_name = "search_query" , url_transformer: url_transformer , on_navigation: on_navigation , enable_category_suggestions: enable_category_suggestions = true , disable_scrolling_during_modal: // Stuff needed for non-standard customer deployments that we shouldn't actually expose
+    disable_scrolling_during_modal = true , api: api , bottom_distance_under_modal_: bottom_distance_under_modal_ , ...props_on_class }){
         if ($59f48be661ca9195$export$ac6237957a15b3f0.#has_been_constructed) throw new Error("You can only have one instance of DepictSearch");
         Object.assign(this, props_on_class);
         const alternative_query_submitter_for_spas_ = on_navigation && ((search_param_name, new_search_query, url_transformer)=>{
@@ -8080,7 +8104,7 @@ class $59f48be661ca9195$export$ac6237957a15b3f0 {
             [search_query_url_param_name]: ""
         });
         const search_query_signal_ = (0, $kyEB6$createSignal)((0, $kyEB6$untrack)(raw_search_query_signal[0]));
-        const depict_api_ = new (0, $7fa23e2a0079eca4$export$e015ed2f2950f2e3)();
+        const depict_api_ = api ?? new (0, $7fa23e2a0079eca4$export$e015ed2f2950f2e3)();
         const previous_searches = (0, $21f51c14cb3f586f$export$84bba84a7b837187)(search_query_signal_);
         const [, set_search_showing_recommendation_rows] = state_.search_showing_recommendation_rows;
         const after_submit_ = ()=>set_search_showing_recommendation_rows((0, $172e1b898d457050$export$1c8c715550dc689d)); // do this every time after we have submitted a new query - otherwise there might already be a saved number of rows in the state
@@ -8150,7 +8174,9 @@ class $59f48be661ca9195$export$ac6237957a15b3f0 {
                     has_sort_or_filters_: (0, $kyEB6$createMemo)(()=>!!(Object.keys(state_.search_selected_filters[0]())?.length || state_.search_sorting[0]()))
                 },
                 i18n_: i18n_,
-                enable_category_suggestions_: enable_category_suggestions
+                enable_category_suggestions_: enable_category_suggestions,
+                disable_scrolling_: disable_scrolling_during_modal,
+                bottom_distance_under_modal_: bottom_distance_under_modal_
             });
             // This will add some default behaviour to open_modal_ if no style_props_ are supplied
             // The default behaviour is to align the modal with the input field if possible
@@ -8248,8 +8274,14 @@ function $59f48be661ca9195$var$get_shared_properties(depict_search) {
     if (!shared_properties) throw new Error("Can't connect to provided DepictSearch instance");
     return shared_properties;
 }
-function $59f48be661ca9195$export$f2dc7e4e4aa11abb({ depict_search: depict_search , include_input_field: include_input_field , grid_spacing: grid_spacing , cols_at_size: cols_at_size , product_card_template: product_card_template , get_product_id: get_product_id = (0, $kyEB6$normal_get_product_id)  }) {
+function $59f48be661ca9195$export$f2dc7e4e4aa11abb({ depict_search: depict_search , include_input_field: include_input_field , grid_spacing: grid_spacing , cols_at_size: cols_at_size , product_card_template: product_card_template , get_product_id: get_product_id = (0, $kyEB6$normal_get_product_id) , extra_depict_options: extra_depict_options  }) {
     const shared_properties = $59f48be661ca9195$var$get_shared_properties(depict_search);
+    const grid_spacing_override = typeof grid_spacing === "string" ? {
+        grid_spacing: grid_spacing
+    } : {
+        override_vertical_spacing: grid_spacing.vertical,
+        grid_spacing: grid_spacing.horizontal
+    };
     return $59f48be661ca9195$var$run_in_root_or_auto_cleanup(()=>{
         const { state_: state_  } = shared_properties;
         (0, $kyEB6$onCleanup)(shared_properties.reset_history_state_);
@@ -8299,25 +8331,26 @@ function $59f48be661ca9195$export$f2dc7e4e4aa11abb({ depict_search: depict_searc
             include_input_field_: include_input_field,
             layout_options_: {
                 cols_at_size: (0, $b5cccc8ee7d24677$export$6daf8749b65a1b77)(cols_at_size),
-                ...typeof grid_spacing === "string" ? {
-                    grid_spacing: grid_spacing
-                } : {
-                    override_vertical_spacing: grid_spacing.vertical,
-                    grid_spacing: grid_spacing.horizontal
-                }
+                ...grid_spacing_override
             },
+            recommendations_layout_options_: extra_depict_options?.recommendations_cols_at_size ? {
+                cols_at_size: (0, $b5cccc8ee7d24677$export$6daf8749b65a1b77)(extra_depict_options.recommendations_cols_at_size),
+                ...grid_spacing_override
+            } : undefined,
             slider_arrow_button_: (0, $kyEB6$GenericSliderArrowButton)({
                 height_: 12,
                 width_: 6.46
             }),
             rr_options_: {
-                template: product_card_template
+                template: product_card_template,
+                pre_processors: extra_depict_options?.pre_processors,
+                post_processors: extra_depict_options?.post_processors
             },
             get_product_id_: get_product_id
         });
     }, "Entire SearchPage failed");
 }
-function $59f48be661ca9195$export$b94867ecbd698f21({ depict_search: depict_search , modal_dispose_handler: modal_dispose_handler  }) {
+function $59f48be661ca9195$export$b94867ecbd698f21({ depict_search: depict_search , modal_dispose_handler: modal_dispose_handler , click_handler: click_handler  }) {
     const shared_properties = $59f48be661ca9195$var$get_shared_properties(depict_search);
     return $59f48be661ca9195$var$run_in_root_or_auto_cleanup(()=>{
         const input = (0, $kyEB6$createComponent)((0, $857105c41ea47bee$export$ff21851bb5d30e15), {
@@ -8338,7 +8371,7 @@ function $59f48be661ca9195$export$b94867ecbd698f21({ depict_search: depict_searc
             },
             disabled_: true,
             field_element_ref_: (field)=>{
-                const handler = (0, $kyEB6$catchify)(()=>{
+                const handler = click_handler ?? (0, $kyEB6$catchify)(()=>{
                     depict_search.modal_open = [
                         {
                             style_props_: style_props_

package/package.json

@@ -1,12 +1,15 @@
 {
   "name": "@depict-ai/ui",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "packageManager": "yarn@3.2.2",
   "source": "src/index.ts",
   "main": "dist/main.js",
   "module": "dist/module.js",
   "types": "dist/index.d.ts",
   "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
   "scripts": {
     "build": "./scripts/build",
     "publish": "yarn build && yarn npm publish",
@@ -33,7 +36,7 @@
     }
   },
   "dependencies": {
-    "@depict-ai/utilishared": "^0.0.5",
+    "@depict-ai/utilishared": "^0.0.7",
     "solid-js": "^1.6.2"
   },
   "devDependencies": {