@depict-ai/ui 1.1.0 → 1.1.2

package/dist/client/main.js

@@ -1,11 +1,12 @@
 var $57o7A$depictaiutilishared = require("@depict-ai/utilishared");
-var $57o7A$solidjsweb = require("solid-js/web");
 var $57o7A$solidjs = require("solid-js");
+var $57o7A$solidjsweb = require("solid-js/web");
 
 function $parcel$export(e, n, v, s) {
   Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
 }
 
+$parcel$export(module.exports, "general_modal_abstraction", () => $9abb0a35d4b60ed3$export$79b1565500412d9b);
 $parcel$export(module.exports, "CrossIcon", () => $c77c68e559a1506c$export$3b621d86b1566b2);
 $parcel$export(module.exports, "GenericSliderArrowButton", () => $0f313083912e447a$export$8be2714ec7f169ee);
 $parcel$export(module.exports, "fetchDepictRecommendations", () => $bc91d938b8c601b4$export$58e808b1db15d3bc);
@@ -42,12 +43,62 @@ $parcel$export(module.exports, "defaultGridSpacing", () => $a3280f0aad997933$exp
 $parcel$export(module.exports, "defaultColsAtSize", () => $a3280f0aad997933$export$c3834fa86c616831);
 $parcel$export(module.exports, "defaultCategoryTitlePlugin", () => $a3280f0aad997933$export$7bf543b9d9be2c22);
 $parcel$export(module.exports, "version", () => $b757f75811f3261f$export$83d89fbfd8236492);
-/*! Depict.ai search and product listing SDK */ const $b757f75811f3261f$export$83d89fbfd8236492 = "1.0.18";
+/*! Depict.ai search and product listing SDK */ const $b757f75811f3261f$export$83d89fbfd8236492 = "1.1.2";
 
 
 
 
 
+async function $9abb0a35d4b60ed3$export$79b1565500412d9b(search_modal, modal_fn_opts) {
+    const body = await (0, $57o7A$depictaiutilishared.observer).wait_for_element("body");
+    let dispose_and_remove;
+    const open_modal_ = (extra_options_for_modal = {}, on_dispose)=>{
+        if (dispose_and_remove) // modal is already open
+        return;
+        const modal_els = (0, $57o7A$solidjs.createRoot)((dispose)=>{
+            let closing_animation;
+            let animation_started;
+            dispose_and_remove = ()=>{
+                const actually_close = ()=>{
+                    dispose();
+                    on_dispose?.();
+                    modal_els.forEach((el)=>el.remove());
+                };
+                if (animation_started && +new Date() - animation_started > 1000) // Animation broke, close it this time
+                actually_close();
+                else if (!animation_started && closing_animation) {
+                    animation_started = +new Date();
+                    (0, $57o7A$depictaiutilishared.catchify)(closing_animation)()?.then((0, $57o7A$depictaiutilishared.catchify)(actually_close));
+                } else actually_close();
+            };
+            return search_modal({
+                ...modal_fn_opts,
+                ...extra_options_for_modal,
+                close_modal_: close_modal_,
+                open_modal_: open_modal_,
+                register_closing_animation_: (animation)=>closing_animation = animation
+            });
+        });
+        body.append(...modal_els);
+    };
+    const close_modal_ = ()=>{
+        if (dispose_and_remove) {
+            // modal is open
+            const dispose_fn = dispose_and_remove;
+            // set dispose function to undefined in case that it triggers this dispose function itself. Not doing it leads to a bug like https://github.com/solidjs/solid/discussions/1194
+            dispose_and_remove = undefined;
+            dispose_fn();
+        }
+    };
+    return {
+        open_modal_: open_modal_,
+        close_modal_: close_modal_
+    };
+}
+
+
+
+
 
 
 
@@ -1825,55 +1876,6 @@ function $235a2771a44e28e9$export$fecbb157621501bd({ number_of_rendered_selected
 
 
 
-async function $9abb0a35d4b60ed3$export$79b1565500412d9b(search_modal, modal_fn_opts) {
-    const body = await (0, $57o7A$depictaiutilishared.observer).wait_for_element("body");
-    let dispose_and_remove;
-    const open_modal_ = (extra_options_for_modal = {}, on_dispose)=>{
-        if (dispose_and_remove) // modal is already open
-        return;
-        const modal_els = (0, $57o7A$solidjs.createRoot)((dispose)=>{
-            let closing_animation;
-            let animation_started;
-            dispose_and_remove = ()=>{
-                const actually_close = ()=>{
-                    dispose();
-                    on_dispose?.();
-                    modal_els.forEach((el)=>el.remove());
-                };
-                if (animation_started && +new Date() - animation_started > 1000) // Animation broke, close it this time
-                actually_close();
-                else if (!animation_started && closing_animation) {
-                    animation_started = +new Date();
-                    (0, $57o7A$depictaiutilishared.catchify)(closing_animation)()?.then((0, $57o7A$depictaiutilishared.catchify)(actually_close));
-                } else actually_close();
-            };
-            return search_modal({
-                ...modal_fn_opts,
-                ...extra_options_for_modal,
-                close_modal_: close_modal_,
-                open_modal_: open_modal_,
-                register_closing_animation_: (animation)=>closing_animation = animation
-            });
-        });
-        body.append(...modal_els);
-    };
-    const close_modal_ = ()=>{
-        if (dispose_and_remove) {
-            // modal is open
-            const dispose_fn = dispose_and_remove;
-            // set dispose function to undefined in case that it triggers this dispose function itself. Not doing it leads to a bug like https://github.com/solidjs/solid/discussions/1194
-            dispose_and_remove = undefined;
-            dispose_fn();
-        }
-    };
-    return {
-        open_modal_: open_modal_,
-        close_modal_: close_modal_
-    };
-}
-
-
-
 
 
 
@@ -4676,7 +4678,6 @@ function $2fb324fbcc7b4a7b$var$ActualFloatingButtons({ search_filters_open_: [ge
 
 
 
-
 const $1ab22f2cd39b3061$var$operator_map = {
     "eq": "≡",
     "neq": "≠",
@@ -5849,7 +5850,8 @@ function $c79fd10a3ab7d6e0$export$477caf01aecaeb2a(options) {
         router_.navigate_.go_to_({
             is_replace_: true,
             new_url_: url_object.href,
-            force_spa_navigation_: true
+            force_spa_navigation_: true,
+            scroll: false
         });
     }, {
         defer: true
@@ -5909,7 +5911,7 @@ class $e96dd13889871fc0$export$7e1297a3a19f10d8 {
      * @param force_spa_navigation_ if you want to force SPA navigation even if on_navigation_ is set to "hard_navigation". You should only set this to true for inter-SDK-page navigations
      * @param is_replace_ if you want to replace the current URL in history instead of pushing a new one
      * @param category_query_id_ If you are navigating to a category and know the query_id of, please provide it. This is for making a better devEx in js-ui
-     */ go_to_: (0, $57o7A$depictaiutilishared.catchify)(async ({ new_url_: raw_new_url , event_: event_ , force_spa_navigation_: force_spa_navigation_ , is_replace_: is_replace_ , category_query_id_: category_query_id_  })=>{
+     */ go_to_: (0, $57o7A$depictaiutilishared.catchify)(async ({ new_url_: raw_new_url , event_: event_ , force_spa_navigation_: force_spa_navigation_ , is_replace_: is_replace_ , category_query_id_: category_query_id_ , scroll: scroll = true  })=>{
             const new_url_ = raw_new_url instanceof URL ? raw_new_url : new URL(raw_new_url, location.origin);
             const wants_hard_navigation = this.on_navigation_ === "hard_navigation";
             if (this.#dont_attempt_navigation(event_)) return;
@@ -5931,7 +5933,8 @@ class $e96dd13889871fc0$export$7e1297a3a19f10d8 {
                 history[is_replace_ ? "replaceState" : "pushState"](new_state, "", new_url_);
             } else this.#throwing_on_navigation.call(this, {
                 is_replace: is_replace_,
-                new_url: new_url_ instanceof URL ? new_url_ : new URL(new_url_, location.origin)
+                new_url: new_url_ instanceof URL ? new_url_ : new URL(new_url_, location.origin),
+                scroll: scroll
             });
             await promise;
         })
@@ -8065,9 +8068,28 @@ function $65a0c4b1c2eb5d0b$export$9dd50d35b9d94fdf({ get_search_query_: get_sear
 
 
 
+
+function $2005eec80e40088f$export$41b4894022a3580f({ style_props_: style_props_ = (0, $57o7A$solidjs.createSignal)({})  } = {}) {
+    const [, set_style_props] = style_props_;
+    const supports_hover = (0, $b54e6192d0caa293$export$d9f36cf74e24d595)("(hover: hover) and (pointer: fine)");
+    const desktop_short = (0, $b54e6192d0caa293$export$d9f36cf74e24d595)("(max-height: 790px)");
+    const mobile_short = (0, $b54e6192d0caa293$export$d9f36cf74e24d595)("(max-height: 1000px)");
+    const transform_y = (0, $57o7A$solidjs.createMemo)(()=>supports_hover() ? !desktop_short() : !mobile_short());
+    set_style_props({
+        position: "fixed",
+        top: "50%"
+    });
+    (0, $57o7A$solidjs.createComputed)(()=>set_style_props((old_value)=>({
+                ...old_value,
+                transform: transform_y() ? "translateY(-50%)" : "unset"
+            })));
+    return style_props_;
+}
+
+
+
 const $f1d7cb69f839a526$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$57o7A$solidjsweb.template)(`<div class="filter-results-for-one-row"><!#><!/><!#><!/></div>`, 6), $f1d7cb69f839a526$var$_tmpl$2 = /*@__PURE__*/ (0, /*@__PURE__*/$57o7A$solidjsweb.template)(`<div class="depict plp search"><div class="listing-page"><!#><!/><!#><!/><!#><!/><!#><!/><!#><!/><!#><!/></div><!#><!/><!#><!/></div>`, 20);
-function $f1d7cb69f839a526$export$a54ec244c8863715(opts) {
-    const { depict_api_: depict_api_ , search_field_value_: search_field_value_ , get_search_query_: get_search_query_ , open_modal_: open_modal_ , submit_query_: submit_query_ , current_sorting_: current_sorting_ , min_products_to_fetch_: min_products_to_fetch_ , search_filters_open_: search_filters_open_ , search_sorting_open_: search_sorting_open_ , expanded_filters_: expanded_filters_ , input_modal_open_: input_modal_open_ , selected_filters_: selected_filters_ , i18n_: i18n_ , make_category_suggestion_card_: make_category_suggestion_card_ , expanded_hierarchical_filters_: expanded_hierarchical_filters_ , clear_filters_on_next_submit_: clear_filters_on_next_submit_ , local_filter_cache_: local_filter_cache_ , include_input_field_: include_input_field_ , tenant_: tenant_ , market_: market_ , showing_recommendation_rows_: showing_recommendation_rows_ , search_recs_view_more_: search_recs_view_more_ , disable_search_recommendations_: disable_search_recommendations_ , layout_options_: layout_options_ , recommendations_layout_options_: recommendations_layout_options_ = layout_options_ , scroll_restoration_data_: scroll_restoration_data_ , product_card_template_: product_card_template_  } = opts;
+function $f1d7cb69f839a526$export$a54ec244c8863715({ depict_api_: depict_api_ , search_field_value_: search_field_value_ , get_search_query_: get_search_query_ , open_modal_: open_modal_ , submit_query_: submit_query_ , current_sorting_: current_sorting_ , min_products_to_fetch_: min_products_to_fetch_ , search_filters_open_: search_filters_open_ , search_sorting_open_: search_sorting_open_ , expanded_filters_: expanded_filters_ , input_modal_open_: input_modal_open_ , selected_filters_: selected_filters_ , i18n_: i18n_ , make_category_suggestion_card_: make_category_suggestion_card_ , expanded_hierarchical_filters_: expanded_hierarchical_filters_ , clear_filters_on_next_submit_: clear_filters_on_next_submit_ , local_filter_cache_: local_filter_cache_ , include_input_field_: include_input_field_ , tenant_: tenant_ , market_: market_ , showing_recommendation_rows_: showing_recommendation_rows_ , search_recs_view_more_: search_recs_view_more_ , disable_search_recommendations_: disable_search_recommendations_ , layout_options_: layout_options_ , recommendations_layout_options_: recommendations_layout_options_ = layout_options_ , scroll_restoration_data_: scroll_restoration_data_ , product_card_template_: product_card_template_ , modal_body_style_ref_: modal_body_style_ref_  }) {
     const [get_sorting] = current_sorting_;
     const all_products_loaded_ = (0, $57o7A$solidjs.createSignal)(false);
     const [get_all_products_loaded, set_all_products_loaded] = all_products_loaded_;
@@ -8120,42 +8142,8 @@ function $f1d7cb69f839a526$export$a54ec244c8863715(opts) {
             })));
     const available_filters_ = (0, $57o7A$solidjs.createMemo)(()=>search_results_()?.filters);
     const modal_body_style = (0, $57o7A$solidjs.createSignal)({});
-    let search_field;
-    if (include_input_field_) {
-        const SafeSearchField = (0, $57o7A$depictaiutilishared.catchify)((0, $66b8b9a9613c141d$export$b94867ecbd698f21));
-        let input_element;
-        let div_with_field_class;
-        search_field = SafeSearchField({
-            i18n_: i18n_,
-            search_field_value_: search_field_value_,
-            submit_query_: submit_query_,
-            clear_filters_: clear_filters_on_next_submit_,
-            input_field_ref_: (el)=>input_element = el,
-            field_element_ref_: (el)=>div_with_field_class = el,
-            disabled_: true
-        });
-        if (search_field) {
-            opts?.modal_body_style_ref_?.(modal_body_style);
-            const align_position = (0, $57o7A$depictaiutilishared.catchify)((0, $fd463ff0edb29915$export$b3ad617e9036868))(modal_body_style, search_field, undefined, true);
-            div_with_field_class.addEventListener("click", (0, $57o7A$depictaiutilishared.catchify)((e)=>{
-                const target = e.target;
-                const sel = ".submit";
-                if (target?.matches?.(sel) || target?.closest?.(sel)) // the search button is just decor, don't do anything when clicked
-                return;
-                // When selecting text in the SearchField that's in the page we want the same selection to persist. It doesn't by itself, since the SearchModal has an entirely different SearchField. Therefore, we manually copy the selection over.
-                const selected_text_range_ = [
-                    input_element.selectionStart,
-                    input_element.selectionEnd
-                ];
-                align_position?.();
-                open_modal_({
-                    style_props_: modal_body_style,
-                    selected_text_range_: selected_text_range_
-                }, ()=>include_input_field_?.on_close_?.());
-                include_input_field_?.on_open_?.();
-            }));
-        }
-    }
+    const [get_search_field_elements, set_search_field_elements] = (0, $57o7A$solidjs.createSignal)();
+    const SafeSearchField = (0, $57o7A$depictaiutilishared.catchify)((0, $66b8b9a9613c141d$export$b94867ecbd698f21));
     const [sort_or_filter_open_, set_sort_or_filter_open_] = (0, $57o7A$solidjs.createSignal)(false);
     const [desktop_filter_elements_, set_desktop_filter_elements] = (0, $57o7A$solidjs.createSignal)();
     const formatted_number_of_results_ = (0, $0f400c3f7248d5f1$export$92f2da32c6e7e7ee)({
@@ -8220,11 +8208,60 @@ function $f1d7cb69f839a526$export$a54ec244c8863715(opts) {
         get_search_query_();
         (0, $341a019928b8b91e$export$c7e181728ad525f)(location);
     });
+    (0, $57o7A$solidjs.createEffect)(()=>{
+        // reactive include_input_field
+        // this uses ~7 variables from outer scope which is why I didn't refactor it into a function
+        add_input_field: {
+            const input_field_accessor_value = include_input_field_?.() ?? true; // default to showing input field
+            if (!input_field_accessor_value) break add_input_field;
+            let input_element;
+            let div_with_field_class;
+            const search_field = SafeSearchField({
+                i18n_: i18n_,
+                search_field_value_: search_field_value_,
+                submit_query_: submit_query_,
+                clear_filters_: clear_filters_on_next_submit_,
+                input_field_ref_: (el)=>input_element = el,
+                field_element_ref_: (el)=>div_with_field_class = el,
+                disabled_: true
+            });
+            if (!search_field) break add_input_field;
+            modal_body_style[1]({});
+            modal_body_style_ref_?.(modal_body_style);
+            const align_position = (0, $57o7A$depictaiutilishared.catchify)((0, $fd463ff0edb29915$export$b3ad617e9036868))(modal_body_style, search_field, undefined, true);
+            div_with_field_class.addEventListener("click", (0, $57o7A$depictaiutilishared.catchify)((e)=>{
+                const target = e.target;
+                const sel = ".submit";
+                if (target?.matches?.(sel) || target?.closest?.(sel)) // the search button is just decor, don't do anything when clicked
+                return;
+                // When selecting text in the SearchField that's in the page we want the same selection to persist. It doesn't by itself, since the SearchModal has an entirely different SearchField. Therefore, we manually copy the selection over.
+                const selected_text_range_ = [
+                    input_element.selectionStart,
+                    input_element.selectionEnd
+                ];
+                align_position?.();
+                open_modal_({
+                    style_props_: modal_body_style,
+                    selected_text_range_: selected_text_range_
+                }, ()=>input_field_accessor_value?.on_close_?.());
+                input_field_accessor_value?.on_open_?.();
+            }));
+            set_search_field_elements(search_field);
+            return;
+        }
+        // We bailed out of adding the input field
+        set_search_field_elements();
+        // There *might* still be a modal open, either from depict_search.modal_open = true or clicking the SearchField which existed here. Said modal now doesn't have anything to align to anymore - it will still try to align to the style_props_ which it got through the modal_body_style_ref_ which are now no longer updated.
+        // In that case, we write what's needed to center the modal to the modal_body_style for the lifetime of this effect function call to make sure the modal is centered and the UI doesn't look "botched".
+        (0, $2005eec80e40088f$export$41b4894022a3580f)({
+            style_props_: modal_body_style
+        });
+    });
     return [
         (0, $57o7A$solidjsweb.isServer) ? "<!-- Search page based on Depict SDK -->" : document.createComment("Search page based on Depict SDK"),
         (()=>{
             const _el$6 = (0, $57o7A$solidjsweb.getNextElement)($f1d7cb69f839a526$var$_tmpl$2), _el$7 = _el$6.firstChild, _el$8 = _el$7.firstChild, [_el$9, _co$3] = (0, $57o7A$solidjsweb.getNextMarker)(_el$8.nextSibling), _el$10 = _el$9.nextSibling, [_el$11, _co$4] = (0, $57o7A$solidjsweb.getNextMarker)(_el$10.nextSibling), _el$12 = _el$11.nextSibling, [_el$13, _co$5] = (0, $57o7A$solidjsweb.getNextMarker)(_el$12.nextSibling), _el$14 = _el$13.nextSibling, [_el$15, _co$6] = (0, $57o7A$solidjsweb.getNextMarker)(_el$14.nextSibling), _el$16 = _el$15.nextSibling, [_el$17, _co$7] = (0, $57o7A$solidjsweb.getNextMarker)(_el$16.nextSibling), _el$18 = _el$17.nextSibling, [_el$19, _co$8] = (0, $57o7A$solidjsweb.getNextMarker)(_el$18.nextSibling), _el$20 = _el$7.nextSibling, [_el$21, _co$9] = (0, $57o7A$solidjsweb.getNextMarker)(_el$20.nextSibling), _el$22 = _el$21.nextSibling, [_el$23, _co$10] = (0, $57o7A$solidjsweb.getNextMarker)(_el$22.nextSibling);
-            (0, $57o7A$solidjsweb.insert)(_el$7, search_field, _el$9, _co$3);
+            (0, $57o7A$solidjsweb.insert)(_el$7, get_search_field_elements, _el$9, _co$3);
             (0, $57o7A$solidjsweb.insert)(_el$7, make_category_suggestion_card_ ? (0, $57o7A$solidjsweb.createComponent)((0, $edafe91daf3091d7$export$b69d0d92862de18b), {
                 severity_: "error",
                 message_: "Category suggestions failed",
@@ -8350,7 +8387,6 @@ function $f1d7cb69f839a526$export$a54ec244c8863715(opts) {
 
 
 
-
 function $d8e94ea381ab57fa$export$828dcdd425fd3231(aligner) {
     const style_element = document.createElement("style");
     document.head.append(style_element);
@@ -8376,6 +8412,7 @@ function $d8e94ea381ab57fa$export$828dcdd425fd3231(aligner) {
 
 
 
+
 const $2c61e4cd8229c49a$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$57o7A$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.
@@ -8519,18 +8556,7 @@ class $2c61e4cd8229c49a$export$ac6237957a15b3f0 {
                         return;
                     }
                     // Open centered modal
-                    const supports_hover = (0, $b54e6192d0caa293$export$d9f36cf74e24d595)("(hover: hover) and (pointer: fine)");
-                    const desktop_short = (0, $b54e6192d0caa293$export$d9f36cf74e24d595)("(max-height: 790px)");
-                    const mobile_short = (0, $b54e6192d0caa293$export$d9f36cf74e24d595)("(max-height: 1000px)");
-                    const transform_y = (0, $57o7A$solidjs.createMemo)(()=>supports_hover() ? !desktop_short() : !mobile_short());
-                    const style_props_ = (0, $57o7A$solidjs.createSignal)({
-                        position: "fixed",
-                        top: "50%"
-                    });
-                    (0, $57o7A$solidjs.createComputed)(()=>style_props_[1]((old_value)=>({
-                                ...old_value,
-                                transform: transform_y() ? "translateY(-50%)" : "unset"
-                            })));
+                    const style_props_ = (0, $2005eec80e40088f$export$41b4894022a3580f)();
                     if (signal_value_is_options) {
                         const [options_arg, ...rest] = open_signal_value;
                         open_modal_({
@@ -8598,7 +8624,8 @@ function $2c61e4cd8229c49a$var$get_shared_properties(depict_search) {
     if (!shared_properties) throw new Error("Can't connect to provided DepictSearch instance");
     return shared_properties;
 }
-function $2c61e4cd8229c49a$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 , extra_depict_options: extra_depict_options  }) {
+function $2c61e4cd8229c49a$export$f2dc7e4e4aa11abb(props) {
+    const { depict_search: depict_search , grid_spacing: grid_spacing , cols_at_size: cols_at_size , product_card_template: product_card_template , extra_depict_options: extra_depict_options  } = props;
     const shared_properties = $2c61e4cd8229c49a$var$get_shared_properties(depict_search);
     const grid_spacing_override = typeof grid_spacing === "string" ? {
         grid_spacing: grid_spacing
@@ -8652,7 +8679,7 @@ function $2c61e4cd8229c49a$export$f2dc7e4e4aa11abb({ depict_search: depict_searc
             selected_filters_: shared_properties.selected_filters_,
             showing_recommendation_rows_: state_.search_showing_recommendation_rows,
             scroll_restoration_data_: state_.search_scroll_restoration_data,
-            include_input_field_: include_input_field,
+            include_input_field_: ()=>props.include_input_field,
             layout_options_: {
                 cols_at_size: (0, $4e04be41243c3d80$export$6daf8749b65a1b77)(cols_at_size),
                 ...grid_spacing_override