@depict-ai/ui 0.0.78 → 0.0.79

package/dist/index.d.ts

@@ -7,7 +7,7 @@ import { SearchSuggestionsResponse, CategorySuggestion } from "@depict-ai/types/
 import { SearchSuggestionsRequest } from "@depict-ai/types/api/SearchSuggestionsRequest";
 import { ProductListingRequest } from "@depict-ai/types/api/ProductListingRequest";
 import { ProductListingResponse } from "@depict-ai/types/api/ProductListingResponse";
-export const version = "0.0.78";
+export const version = "0.0.79";
 export type OnNavigation = ((options: {
     is_replace: boolean;
     new_url: URL;

package/dist/main.js

@@ -35,7 +35,7 @@ $parcel$export(module.exports, "solid_format_price", () => $5fc9fc23df1591db$exp
 $parcel$export(module.exports, "connect_search_field_height_to_aligner_height", () => $246e3e89a097f014$export$828dcdd425fd3231);
 $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.78";
+/*! Depict.ai search and product listing SDK */ const $ae93561d5649a847$export$83d89fbfd8236492 = "0.0.79";
 
 
 
@@ -4298,7 +4298,7 @@ const $c6a04c153e9853a7$export$e2cf3f19dd3f8aac = "went_sideways_clear_filters";
 function $c6a04c153e9853a7$export$43cd1e747fecd42e(to_url, set_clearing_flag, from_search_params = new URLSearchParams(location.search)) {
     if (!to_url) return to_url;
     const was_url_object = to_url instanceof URL;
-    const url_object = was_url_object ? to_url : new URL(to_url);
+    const url_object = was_url_object ? to_url : new URL(to_url, location.origin);
     const { searchParams: searchParams  } = url_object;
     if (set_clearing_flag) searchParams.set($c6a04c153e9853a7$export$e2cf3f19dd3f8aac, "true");
     if (from_search_params.has($c6a04c153e9853a7$var$sorting_query_param)) searchParams.set($c6a04c153e9853a7$var$sorting_query_param, from_search_params.get($c6a04c153e9853a7$var$sorting_query_param));
@@ -5327,6 +5327,7 @@ class $43940d5ca403c293$export$7e1297a3a19f10d8 {
      * @param event_ event if you have this in a click handler, will not do anything on cmd/ctrl or non-left click then
      * @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_: async ({ new_url_: new_url_ , event_: event_ , force_spa_navigation_: force_spa_navigation_ , is_replace_: is_replace_ , category_query_id_: category_query_id_  })=>{
             const wants_hard_navigation = this.on_navigation_ === "hard_navigation";
             if (this.#dont_attempt_navigation(event_)) return;
@@ -5340,11 +5341,12 @@ class $43940d5ca403c293$export$7e1297a3a19f10d8 {
             if (force_spa_navigation_ && wants_hard_navigation) {
                 // Don't allow hard navigation if we're forcing SPA navigation, which we do for things where PageReplacer can be used for performance
                 const new_state = history.state;
-                if (category_query_id_) new_state.category_current_query_id = category_query_id_;
+                if (category_query_id_) // In JS-UI we need to know the query_id of the current category, therefore push it into state
+                new_state.category_current_query_id = category_query_id_;
                 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_)
+                new_url: new_url_ instanceof URL ? new_url_ : new URL(new_url_, location.origin)
             });
             await promise;
         }
@@ -6217,8 +6219,10 @@ function $690220645373c65e$export$2542ffb77b620b02(params_to_default_value) {
 
 
 
+
+
 const $1bf0125991f2d39b$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<span class="orig price"></span>`, 2), $1bf0125991f2d39b$var$_tmpl$2 = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$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), $1bf0125991f2d39b$var$_tmpl$3 = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<div class="tagline"></div>`, 2);
-const $1bf0125991f2d39b$export$b05c0ae390cf3e06 = (display_or_variant_container, { i18n: i18n , market: market  })=>{
+const $1bf0125991f2d39b$export$b05c0ae390cf3e06 = (display_or_variant_container, { i18n: i18n , market: market  }, router_)=>{
     const display = (0, $46MJV$solidjs.createMemo)(()=>{
         const display = display_or_variant_container();
         // Support for backend's new display format
@@ -6230,11 +6234,6 @@ const $1bf0125991f2d39b$export$b05c0ae390cf3e06 = (display_or_variant_container,
             };
         }
         if (display.page_url) return display;
-        // Support for post-migration (but still old basic format) Stronger displays, with slug but without page_url
-        if (display.slug) {
-            display.page_url = `/${market}/` + display.slug;
-            return display;
-        }
         // Support for Spendrups displays, used by our frontend script and Spendrups coming react-ui integration.
         if (!display?.variants?.length) return;
         return display.variants.filter((v)=>v.product_id == display.product_id)[0];
@@ -6252,8 +6251,14 @@ const $1bf0125991f2d39b$export$b05c0ae390cf3e06 = (display_or_variant_container,
             init_with_placeholder: true
         }));
     const is_sale = (0, $46MJV$solidjs.createMemo)(()=>display().sale_price !== display().original_price);
+    const href = (0, $46MJV$solidjs.createMemo)(()=>display().page_url);
     const returnVal = (()=>{
         const _el$ = $1bf0125991f2d39b$var$_tmpl$2.cloneNode(true), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.firstChild, _el$5 = _el$4.firstChild, _el$6 = _el$5.nextSibling, _el$7 = _el$4.nextSibling, _el$9 = _el$7.firstChild;
+        (0, $46MJV$solidjsweb.addEventListener)(_el$, "click", (0, $46MJV$depictaiutilishared.catchify)((event_)=>router_.navigate_.go_to_({
+                new_url_: href(),
+                is_replace_: false,
+                event_: event_
+            })), true);
         (0, $46MJV$solidjsweb.insert)(_el$2, contained_image);
         (0, $46MJV$solidjsweb.insert)(_el$5, ()=>display().brand);
         (0, $46MJV$solidjsweb.insert)(_el$6, ()=>display().title);
@@ -6290,7 +6295,7 @@ const $1bf0125991f2d39b$export$b05c0ae390cf3e06 = (display_or_variant_container,
             }), null);
         (0, $46MJV$solidjsweb.insert)(_el$9, ()=>i18n.price_formatting_().post_, null);
         (0, $46MJV$solidjsweb.effect)((_p$)=>{
-            const _v$ = display().page_url, _v$2 = !!is_sale();
+            const _v$ = href(), _v$2 = !!is_sale();
             _v$ !== _p$._v$ && (0, $46MJV$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$;
@@ -6303,10 +6308,13 @@ const $1bf0125991f2d39b$export$b05c0ae390cf3e06 = (display_or_variant_container,
     // This solves a JSX type issue where the return value does not match with the explicit JSX.Element type for some reason
     return returnVal;
 };
+(0, $46MJV$solidjsweb.delegateEvents)([
+    "click"
+]);
 
 
 const $4cadf33fd6aaf4b6$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<div class="instant-results"></div>`, 2);
-function $4cadf33fd6aaf4b6$export$62f101a8aa597bf8({ depict_api_: depict_api_ , search_field_value_: [get_search_field_value] , tenant_: tenant_ , market_: market_ , render_instant_card_: render_instant_card_ , render_instant_card_placeholder_: render_instant_card_placeholder_ , min_products_to_fetch_: min_products_to_fetch_ , has_sort_or_filters_: has_sort_or_filters_ , set_num_results_accessor_: set_num_results_accessor_ , i18n_: i18n_  }) {
+function $4cadf33fd6aaf4b6$export$62f101a8aa597bf8({ depict_api_: depict_api_ , search_field_value_: [get_search_field_value] , tenant_: tenant_ , market_: market_ , render_instant_card_: render_instant_card_ , render_instant_card_placeholder_: render_instant_card_placeholder_ , min_products_to_fetch_: min_products_to_fetch_ , has_sort_or_filters_: has_sort_or_filters_ , set_num_results_accessor_: set_num_results_accessor_ , i18n_: i18n_ , router_: router_  }) {
     const max_cards = 4;
     const [read_current_instant_query, write_current_instant_query] = (0, $46MJV$solidjs.createSignal)("");
     let timeout;
@@ -6364,7 +6372,7 @@ function $4cadf33fd6aaf4b6$export$62f101a8aa597bf8({ depict_api_: depict_api_ ,
                             i18n: i18n_,
                             merchant: tenant_(),
                             market: market_()
-                        }), tenant_, market_)
+                        }, router_), tenant_, market_)
                 });
             }
         }));
@@ -7317,6 +7325,7 @@ function $121d25ca6af2898f$export$1c593cbd6f1e10bc({ search_field_value_: props_
                     i18n_: i18n_,
                     market_: market_,
                     set_num_results_accessor_: set_num_results_accessor_,
+                    router_: router_,
                     ...instant_results_options_
                 });
             }

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, createReaction as $g9l4l$createReaction, on as $g9l4l$on, ErrorBoundary as $g9l4l$ErrorBoundary, Index as $g9l4l$Index, For as $g9l4l$For} from "solid-js";
 import {compressToBase64 as $g9l4l$compressToBase64, decompressFromBase64 as $g9l4l$decompressFromBase64} from "lz-string";
 
-/*! Depict.ai search and product listing SDK */ const $18bf1d29fb889cca$export$83d89fbfd8236492 = "0.0.78";
+/*! Depict.ai search and product listing SDK */ const $18bf1d29fb889cca$export$83d89fbfd8236492 = "0.0.79";
 
 
 
@@ -4266,7 +4266,7 @@ const $73294c7089bfc7c9$export$e2cf3f19dd3f8aac = "went_sideways_clear_filters";
 function $73294c7089bfc7c9$export$43cd1e747fecd42e(to_url, set_clearing_flag, from_search_params = new URLSearchParams(location.search)) {
     if (!to_url) return to_url;
     const was_url_object = to_url instanceof URL;
-    const url_object = was_url_object ? to_url : new URL(to_url);
+    const url_object = was_url_object ? to_url : new URL(to_url, location.origin);
     const { searchParams: searchParams  } = url_object;
     if (set_clearing_flag) searchParams.set($73294c7089bfc7c9$export$e2cf3f19dd3f8aac, "true");
     if (from_search_params.has($73294c7089bfc7c9$var$sorting_query_param)) searchParams.set($73294c7089bfc7c9$var$sorting_query_param, from_search_params.get($73294c7089bfc7c9$var$sorting_query_param));
@@ -5295,6 +5295,7 @@ class $cfa2761d36e5714c$export$7e1297a3a19f10d8 {
      * @param event_ event if you have this in a click handler, will not do anything on cmd/ctrl or non-left click then
      * @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_: async ({ new_url_: new_url_ , event_: event_ , force_spa_navigation_: force_spa_navigation_ , is_replace_: is_replace_ , category_query_id_: category_query_id_  })=>{
             const wants_hard_navigation = this.on_navigation_ === "hard_navigation";
             if (this.#dont_attempt_navigation(event_)) return;
@@ -5308,11 +5309,12 @@ class $cfa2761d36e5714c$export$7e1297a3a19f10d8 {
             if (force_spa_navigation_ && wants_hard_navigation) {
                 // Don't allow hard navigation if we're forcing SPA navigation, which we do for things where PageReplacer can be used for performance
                 const new_state = history.state;
-                if (category_query_id_) new_state.category_current_query_id = category_query_id_;
+                if (category_query_id_) // In JS-UI we need to know the query_id of the current category, therefore push it into state
+                new_state.category_current_query_id = category_query_id_;
                 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_)
+                new_url: new_url_ instanceof URL ? new_url_ : new URL(new_url_, location.origin)
             });
             await promise;
         }
@@ -6185,8 +6187,10 @@ function $4ad18a8b237ff7f6$export$2542ffb77b620b02(params_to_default_value) {
 
 
 
+
+
 const $d3c0043bb23a833f$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$g9l4l$template)(`<span class="orig price"></span>`, 2), $d3c0043bb23a833f$var$_tmpl$2 = /*@__PURE__*/ (0, /*@__PURE__*/$g9l4l$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), $d3c0043bb23a833f$var$_tmpl$3 = /*@__PURE__*/ (0, /*@__PURE__*/$g9l4l$template)(`<div class="tagline"></div>`, 2);
-const $d3c0043bb23a833f$export$b05c0ae390cf3e06 = (display_or_variant_container, { i18n: i18n , market: market  })=>{
+const $d3c0043bb23a833f$export$b05c0ae390cf3e06 = (display_or_variant_container, { i18n: i18n , market: market  }, router_)=>{
     const display = (0, $g9l4l$createMemo)(()=>{
         const display = display_or_variant_container();
         // Support for backend's new display format
@@ -6198,11 +6202,6 @@ const $d3c0043bb23a833f$export$b05c0ae390cf3e06 = (display_or_variant_container,
             };
         }
         if (display.page_url) return display;
-        // Support for post-migration (but still old basic format) Stronger displays, with slug but without page_url
-        if (display.slug) {
-            display.page_url = `/${market}/` + display.slug;
-            return display;
-        }
         // Support for Spendrups displays, used by our frontend script and Spendrups coming react-ui integration.
         if (!display?.variants?.length) return;
         return display.variants.filter((v)=>v.product_id == display.product_id)[0];
@@ -6220,8 +6219,14 @@ const $d3c0043bb23a833f$export$b05c0ae390cf3e06 = (display_or_variant_container,
             init_with_placeholder: true
         }));
     const is_sale = (0, $g9l4l$createMemo)(()=>display().sale_price !== display().original_price);
+    const href = (0, $g9l4l$createMemo)(()=>display().page_url);
     const returnVal = (()=>{
         const _el$ = $d3c0043bb23a833f$var$_tmpl$2.cloneNode(true), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.firstChild, _el$5 = _el$4.firstChild, _el$6 = _el$5.nextSibling, _el$7 = _el$4.nextSibling, _el$9 = _el$7.firstChild;
+        (0, $g9l4l$addEventListener)(_el$, "click", (0, $g9l4l$catchify)((event_)=>router_.navigate_.go_to_({
+                new_url_: href(),
+                is_replace_: false,
+                event_: event_
+            })), true);
         (0, $g9l4l$insert)(_el$2, contained_image);
         (0, $g9l4l$insert)(_el$5, ()=>display().brand);
         (0, $g9l4l$insert)(_el$6, ()=>display().title);
@@ -6258,7 +6263,7 @@ const $d3c0043bb23a833f$export$b05c0ae390cf3e06 = (display_or_variant_container,
             }), null);
         (0, $g9l4l$insert)(_el$9, ()=>i18n.price_formatting_().post_, null);
         (0, $g9l4l$effect)((_p$)=>{
-            const _v$ = display().page_url, _v$2 = !!is_sale();
+            const _v$ = href(), _v$2 = !!is_sale();
             _v$ !== _p$._v$ && (0, $g9l4l$setAttribute)(_el$, "href", _p$._v$ = _v$);
             _v$2 !== _p$._v$2 && _el$9.classList.toggle("sales-price", _p$._v$2 = _v$2);
             return _p$;
@@ -6271,10 +6276,13 @@ const $d3c0043bb23a833f$export$b05c0ae390cf3e06 = (display_or_variant_container,
     // This solves a JSX type issue where the return value does not match with the explicit JSX.Element type for some reason
     return returnVal;
 };
+(0, $g9l4l$delegateEvents)([
+    "click"
+]);
 
 
 const $d811ce622b5b7626$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$g9l4l$template)(`<div class="instant-results"></div>`, 2);
-function $d811ce622b5b7626$export$62f101a8aa597bf8({ depict_api_: depict_api_ , search_field_value_: [get_search_field_value] , tenant_: tenant_ , market_: market_ , render_instant_card_: render_instant_card_ , render_instant_card_placeholder_: render_instant_card_placeholder_ , min_products_to_fetch_: min_products_to_fetch_ , has_sort_or_filters_: has_sort_or_filters_ , set_num_results_accessor_: set_num_results_accessor_ , i18n_: i18n_  }) {
+function $d811ce622b5b7626$export$62f101a8aa597bf8({ depict_api_: depict_api_ , search_field_value_: [get_search_field_value] , tenant_: tenant_ , market_: market_ , render_instant_card_: render_instant_card_ , render_instant_card_placeholder_: render_instant_card_placeholder_ , min_products_to_fetch_: min_products_to_fetch_ , has_sort_or_filters_: has_sort_or_filters_ , set_num_results_accessor_: set_num_results_accessor_ , i18n_: i18n_ , router_: router_  }) {
     const max_cards = 4;
     const [read_current_instant_query, write_current_instant_query] = (0, $g9l4l$createSignal)("");
     let timeout;
@@ -6332,7 +6340,7 @@ function $d811ce622b5b7626$export$62f101a8aa597bf8({ depict_api_: depict_api_ ,
                             i18n: i18n_,
                             merchant: tenant_(),
                             market: market_()
-                        }), tenant_, market_)
+                        }, router_), tenant_, market_)
                 });
             }
         }));
@@ -7285,6 +7293,7 @@ function $a9f6faeac82c322b$export$1c593cbd6f1e10bc({ search_field_value_: props_
                     i18n_: i18n_,
                     market_: market_,
                     set_num_results_accessor_: set_num_results_accessor_,
+                    router_: router_,
                     ...instant_results_options_
                 });
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depict-ai/ui",
-  "version": "0.0.78",
+  "version": "0.0.79",
   "description": "Base package containing the actual UI of Depict UI along with translations, with a not-simplified API. We recommend using @depict-ai/js-ui or @depict-ai/react-ui instead.",
   "packageManager": "yarn@3.2.2",
   "source": [
@@ -85,9 +85,9 @@
     "ts-jest": "^29.0.3"
   },
   "dependencies": {
-    "@depict-ai/plp-styling": "^0.0.40",
-    "@depict-ai/types": "^0.0.30",
-    "@depict-ai/utilishared": "^0.0.82",
+    "@depict-ai/plp-styling": "^0.0.41",
+    "@depict-ai/types": "^0.0.31",
+    "@depict-ai/utilishared": "^0.0.83",
     "lz-string": "^1.4.4",
     "solid-js": "^1.6.2"
   },