@depict-ai/ui 1.0.17 → 1.1.0

package/dist/module.js

@@ -2,7 +2,7 @@ import {add_to_version_info as $kyEB6$add_to_version_info, fetch_recs as $kyEB6$
 import {template as $kyEB6$template, insert as $kyEB6$insert, effect as $kyEB6$effect, setAttribute as $kyEB6$setAttribute, createComponent as $kyEB6$createComponent, use as $kyEB6$use, memo as $kyEB6$memo, addEventListener as $kyEB6$addEventListener, delegateEvents as $kyEB6$delegateEvents, spread as $kyEB6$spread, classList as $kyEB6$classList, style as $kyEB6$style, Dynamic as $kyEB6$Dynamic, mergeProps as $kyEB6$mergeProps, className as $kyEB6$className} from "solid-js/web";
 import {createSignal as $kyEB6$createSignal, getOwner as $kyEB6$getOwner, createRoot as $kyEB6$createRoot, runWithOwner as $kyEB6$runWithOwner, onCleanup as $kyEB6$onCleanup, createComputed as $kyEB6$createComputed, createRenderEffect as $kyEB6$createRenderEffect, createEffect as $kyEB6$createEffect, untrack as $kyEB6$untrack, batch as $kyEB6$batch, createResource as $kyEB6$createResource, createMemo as $kyEB6$createMemo, Show as $kyEB6$Show, createReaction as $kyEB6$createReaction, Suspense as $kyEB6$Suspense, on as $kyEB6$on, ErrorBoundary as $kyEB6$ErrorBoundary, For as $kyEB6$For, Index as $kyEB6$Index} from "solid-js";
 
-/*! Depict.ai search and product listing SDK */ const $ec291e0010116877$export$83d89fbfd8236492 = "1.0.17";
+/*! Depict.ai search and product listing SDK */ const $ec291e0010116877$export$83d89fbfd8236492 = "1.1.0";
 
 
 
@@ -144,10 +144,23 @@ class $7fa23e2a0079eca4$export$e015ed2f2950f2e3 {
         let resolve_in_progress;
         cache_obj.in_progress_[body] = new Promise((r)=>resolve_in_progress = r);
         try {
-            const search_results = await (0, $kyEB6$fetch_retry)((0, $kyEB6$add_version_query_params)(endpoint1), {
+            let search_results = await (0, $kyEB6$fetch_retry)((0, $kyEB6$add_version_query_params)(endpoint1), {
                 method: "POST",
                 body: body
             });
+            if ("query_id" in request && request.type === "collection") // FIXME: Remove. Backwards compatibility layer
+            // This will retry the request without the collection type if the first request fails
+            {
+                if (!search_results || search_results?.status === 404) {
+                    (0, $kyEB6$dlog)("Fallback request for collections due to failure");
+                    const fallback_body = JSON.parse(body);
+                    delete fallback_body.type;
+                    search_results = await (0, $kyEB6$fetch_retry)((0, $kyEB6$add_version_query_params)(endpoint1), {
+                        method: "POST",
+                        body: JSON.stringify(fallback_body)
+                    });
+                }
+            }
             if (!search_results || search_results.status !== 200) {
                 const retval = fallback_response(input_req);
                 resolve_in_progress(retval);
@@ -4971,7 +4984,7 @@ function $eb9ba2e49ab3dcc2$export$d4fc5c0e68a52116(el, query_id_, i18n_) {
 
 
 const $df5d81d0fe61ff21$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$kyEB6$template)(`<div class="product-count"> </div>`, 2), $df5d81d0fe61ff21$var$_tmpl$2 = /*@__PURE__*/ (0, /*@__PURE__*/$kyEB6$template)(`<div></div>`, 2), $df5d81d0fe61ff21$var$_tmpl$3 = /*@__PURE__*/ (0, /*@__PURE__*/$kyEB6$template)(`<div class="filter-results-for-one-row"></div>`, 2), $df5d81d0fe61ff21$var$_tmpl$4 = /*@__PURE__*/ (0, /*@__PURE__*/$kyEB6$template)(`<div class="depict plp category"><div class="listing-page"></div></div>`, 4);
-function $df5d81d0fe61ff21$export$f7d2f673fc2f091d({ depict_api_: depict_api_ , query_id_: query_id_ , current_sorting_: current_sorting_ , min_products_to_fetch_: min_products_to_fetch_ , category_filters_open_: category_filters_open_ , category_sorting_open_: category_sorting_open_ , expanded_filters_: expanded_filters_ , selected_filters_: selected_filters_ , get_quicklinks_accessor_: get_quicklinks_accessor_ , i18n_: incoming_i18n , get_breadcrumb_accessor_: get_breadcrumb_accessor_ , slider_arrow_button_: slider_arrow_button_ , expanded_hierarchical_filters_: expanded_hierarchical_filters_ , local_filter_cache_: local_filter_cache_ , tenant_: tenant_ , market_: market_ , router_: router_ , show_quicklinks_: show_quicklinks_ , category_title_: category_title_ , show_breadcrumbs_: show_breadcrumbs_ , layout_options_: layout_options_ , scroll_restoration_data_: scroll_restoration_data_ , product_card_template_: product_card_template_ , sideways_filter_clearing_flag_: sideways_filter_clearing_flag_  }) {
+function $df5d81d0fe61ff21$export$f7d2f673fc2f091d({ depict_api_: depict_api_ , query_id_: query_id_ , listing_type_: listing_type_ , current_sorting_: current_sorting_ , min_products_to_fetch_: min_products_to_fetch_ , category_filters_open_: category_filters_open_ , category_sorting_open_: category_sorting_open_ , expanded_filters_: expanded_filters_ , selected_filters_: selected_filters_ , get_quicklinks_accessor_: get_quicklinks_accessor_ , i18n_: incoming_i18n , get_breadcrumb_accessor_: get_breadcrumb_accessor_ , slider_arrow_button_: slider_arrow_button_ , expanded_hierarchical_filters_: expanded_hierarchical_filters_ , local_filter_cache_: local_filter_cache_ , tenant_: tenant_ , market_: market_ , router_: router_ , show_quicklinks_: show_quicklinks_ , category_title_: category_title_ , show_breadcrumbs_: show_breadcrumbs_ , layout_options_: layout_options_ , scroll_restoration_data_: scroll_restoration_data_ , product_card_template_: product_card_template_ , sideways_filter_clearing_flag_: sideways_filter_clearing_flag_  }) {
     let results_for;
     let only_show_filters_opener_;
     let middle_elements_;
@@ -4996,6 +5009,7 @@ function $df5d81d0fe61ff21$export$f7d2f673fc2f091d({ depict_api_: depict_api_ ,
             tenant: tenant_(),
             market: market_(),
             query_id: query_id_(),
+            type: listing_type_(),
             ...f.length ? {
                 filters: f
             } : {},
@@ -5497,7 +5511,8 @@ function $ccd5db07a3a069c5$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
@@ -5557,7 +5572,7 @@ class $4fd2ba03703a7d92$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, $kyEB6$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, $kyEB6$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;
@@ -5579,7 +5594,8 @@ class $4fd2ba03703a7d92$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;
         })
@@ -5605,6 +5621,7 @@ class $961b5c64bef4662f$export$f34314aa9505732e {
     #merchant_signal = (0, $kyEB6$createSignal)();
     #market_signal = (0, $kyEB6$createSignal)();
     #query_id_signal = (0, $kyEB6$createSignal)("");
+    #listing_type_signal = (0, $kyEB6$createSignal)();
     static #has_been_constructed = false;
     get localization() {
         // allow reactive access
@@ -5631,6 +5648,12 @@ class $961b5c64bef4662f$export$f34314aa9505732e {
     set market(market) {
         this.#market_signal[1](market);
     }
+    get listing_type() {
+        return this.#listing_type_signal[0]();
+    }
+    set listing_type(listing_type) {
+        this.#listing_type_signal[1](listing_type);
+    }
     get on_navigation() {
         // The only non-reactive public property on the class (I don't see it making sense to have it reactive)
         return this.#router.on_navigation_;
@@ -5696,6 +5719,7 @@ function $961b5c64bef4662f$export$e2bf8ce7779e827e({ depict_category: depict_cat
             min_products_to_fetch_: $961b5c64bef4662f$var$min_products_to_fetch_,
             local_filter_cache_: local_filter_cache_,
             query_id_: ()=>depict_category.category_id,
+            listing_type_: ()=>depict_category.listing_type,
             i18n_: i18n_,
             show_quicklinks_: show_quicklinks,
             category_title_: category_title,
@@ -7595,9 +7619,28 @@ function $f8c929beb82c512b$export$9dd50d35b9d94fdf({ get_search_query_: get_sear
 
 
 
+
+
+function $1801dbce7adb3f19$export$41b4894022a3580f({ style_props_: style_props_ = (0, $kyEB6$createSignal)({})  } = {}) {
+    const [, set_style_props] = style_props_;
+    const supports_hover = (0, $dc9262ef6f786812$export$d9f36cf74e24d595)("(hover: hover) and (pointer: fine)");
+    const desktop_short = (0, $dc9262ef6f786812$export$d9f36cf74e24d595)("(max-height: 790px)");
+    const mobile_short = (0, $dc9262ef6f786812$export$d9f36cf74e24d595)("(max-height: 1000px)");
+    const transform_y = (0, $kyEB6$createMemo)(()=>supports_hover() ? !desktop_short() : !mobile_short());
+    set_style_props({
+        position: "fixed",
+        top: "50%"
+    });
+    (0, $kyEB6$createComputed)(()=>set_style_props((old_value)=>({
+                ...old_value,
+                transform: transform_y() ? "translateY(-50%)" : "unset"
+            })));
+    return style_props_;
+}
+
+
 const $7097477c78a89208$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$kyEB6$template)(`<div class="filter-results-for-one-row"></div>`, 2), $7097477c78a89208$var$_tmpl$2 = /*@__PURE__*/ (0, /*@__PURE__*/$kyEB6$template)(`<div class="depict plp search"><div class="listing-page"></div></div>`, 4);
-function $7097477c78a89208$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_ , slider_arrow_button_: slider_arrow_button_ , 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 $7097477c78a89208$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_ , slider_arrow_button_: slider_arrow_button_ , 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, $kyEB6$createSignal)(false);
     const [get_all_products_loaded, set_all_products_loaded] = all_products_loaded_;
@@ -7650,42 +7693,8 @@ function $7097477c78a89208$export$a54ec244c8863715(opts) {
             })));
     const available_filters_ = (0, $kyEB6$createMemo)(()=>search_results_()?.filters);
     const modal_body_style = (0, $kyEB6$createSignal)({});
-    let search_field;
-    if (include_input_field_) {
-        const SafeSearchField = (0, $kyEB6$catchify)((0, $5285d2814d0fac0c$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, $kyEB6$catchify)((0, $b6d5529b253681aa$export$b3ad617e9036868))(modal_body_style, search_field, undefined, true);
-            div_with_field_class.addEventListener("click", (0, $kyEB6$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, $kyEB6$createSignal)();
+    const SafeSearchField = (0, $kyEB6$catchify)((0, $5285d2814d0fac0c$export$b94867ecbd698f21));
     const [sort_or_filter_open_, set_sort_or_filter_open_] = (0, $kyEB6$createSignal)(false);
     const [desktop_filter_elements_, set_desktop_filter_elements] = (0, $kyEB6$createSignal)();
     const formatted_number_of_results_ = (0, $511cc0abd9a64ce8$export$92f2da32c6e7e7ee)({
@@ -7749,11 +7758,60 @@ function $7097477c78a89208$export$a54ec244c8863715(opts) {
         get_search_query_();
         (0, $d78eea1e8707dc2d$export$c7e181728ad525f)(location);
     });
+    (0, $kyEB6$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, $kyEB6$catchify)((0, $b6d5529b253681aa$export$b3ad617e9036868))(modal_body_style, search_field, undefined, true);
+            div_with_field_class.addEventListener("click", (0, $kyEB6$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, $1801dbce7adb3f19$export$41b4894022a3580f)({
+            style_props_: modal_body_style
+        });
+    });
     return [
         document.createComment("Search page based on Depict SDK"),
         (()=>{
             const _el$2 = $7097477c78a89208$var$_tmpl$2.cloneNode(true), _el$3 = _el$2.firstChild;
-            (0, $kyEB6$insert)(_el$3, search_field, null);
+            (0, $kyEB6$insert)(_el$3, get_search_field_elements, null);
             (0, $kyEB6$insert)(_el$3, make_category_suggestion_card_ ? (0, $kyEB6$createComponent)((0, $b7436a6d1fd64e3b$export$b69d0d92862de18b), {
                 severity_: "error",
                 message_: "Category suggestions failed",
@@ -7881,7 +7939,6 @@ function $7097477c78a89208$export$a54ec244c8863715(opts) {
 
 
 
-
 function $4ca91518c9a35379$export$828dcdd425fd3231(aligner) {
     const style_element = document.createElement("style");
     document.head.append(style_element);
@@ -7906,6 +7963,7 @@ function $4ca91518c9a35379$export$828dcdd425fd3231(aligner) {
 
 
 
+
 const $806c97b931758897$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$kyEB6$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.
@@ -8048,18 +8106,7 @@ class $806c97b931758897$export$ac6237957a15b3f0 {
                         return;
                     }
                     // Open centered modal
-                    const supports_hover = (0, $dc9262ef6f786812$export$d9f36cf74e24d595)("(hover: hover) and (pointer: fine)");
-                    const desktop_short = (0, $dc9262ef6f786812$export$d9f36cf74e24d595)("(max-height: 790px)");
-                    const mobile_short = (0, $dc9262ef6f786812$export$d9f36cf74e24d595)("(max-height: 1000px)");
-                    const transform_y = (0, $kyEB6$createMemo)(()=>supports_hover() ? !desktop_short() : !mobile_short());
-                    const style_props_ = (0, $kyEB6$createSignal)({
-                        position: "fixed",
-                        top: "50%"
-                    });
-                    (0, $kyEB6$createComputed)(()=>style_props_[1]((old_value)=>({
-                                ...old_value,
-                                transform: transform_y() ? "translateY(-50%)" : "unset"
-                            })));
+                    const style_props_ = (0, $1801dbce7adb3f19$export$41b4894022a3580f)();
                     if (signal_value_is_options) {
                         const [options_arg, ...rest] = open_signal_value;
                         open_modal_({
@@ -8127,7 +8174,8 @@ function $806c97b931758897$var$get_shared_properties(depict_search) {
     if (!shared_properties) throw new Error("Can't connect to provided DepictSearch instance");
     return shared_properties;
 }
-function $806c97b931758897$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 $806c97b931758897$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 = $806c97b931758897$var$get_shared_properties(depict_search);
     const grid_spacing_override = typeof grid_spacing === "string" ? {
         grid_spacing: grid_spacing
@@ -8181,7 +8229,7 @@ function $806c97b931758897$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, $b5cccc8ee7d24677$export$6daf8749b65a1b77)(cols_at_size),
                 ...grid_spacing_override