@depict-ai/ui 0.0.81 → 0.0.83

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.81";
+export const version = "0.0.83";
 export type OnNavigation = ((options: {
     is_replace: boolean;
     new_url: URL;

package/dist/main.js

@@ -35,7 +35,7 @@ $parcel$export(module.exports, "SolidFormatPrice", () => $5fc9fc23df1591db$expor
 $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.81";
+/*! Depict.ai search and product listing SDK */ const $ae93561d5649a847$export$83d89fbfd8236492 = "0.0.83";
 
 
 
@@ -60,7 +60,9 @@ async function $8c4e48a4bf96b284$export$58e808b1db15d3bc({ merchant: merchant ,
 function $1ee6da2465098194$export$e183a13865960371(params_to_default_value, router_) {
     const signals = {};
     const entries = Object.entries(params_to_default_value);
-    const event_handler = (0, $46MJV$depictaiutilishared.catchify)(({ state: state  })=>$1ee6da2465098194$var$history_state_change(signals, entries, state));
+    const event_handler = (0, $46MJV$depictaiutilishared.catchify)((what_happened, args)=>{
+        if (what_happened == "popstate") $1ee6da2465098194$var$history_state_change(signals, entries, args.state);
+    });
     // createRenderEffect because we need the instant execution so the signals always contain values, even before solid's render phase
     (0, $46MJV$solidjs.createRenderEffect)(()=>{
         let signal_changed = false;
@@ -76,8 +78,9 @@ function $1ee6da2465098194$export$e183a13865960371(params_to_default_value, rout
         }
         if (signal_changed) router_.navigate_.replace_state_(state);
     });
-    window.addEventListener("popstate", event_handler);
-    (0, $46MJV$solidjs.onCleanup)((0, $46MJV$depictaiutilishared.catchify)(()=>window.removeEventListener("popstate", event_handler)));
+    // history_dot_state_to_state needs to update after its signals after url_state does BUT in the same task (might even have to be in the same tick in the microtask queue). If we'd use window.addEventListener("popstate") it would be guaranteed to be too late since each event listener has its own task
+    (0, $46MJV$depictaiutilishared.instant_exec_on_suspect_history_change).add(event_handler);
+    (0, $46MJV$solidjs.onCleanup)((0, $46MJV$depictaiutilishared.catchify)(()=>(0, $46MJV$depictaiutilishared.instant_exec_on_suspect_history_change).delete(event_handler)));
     (0, $46MJV$solidjs.createEffect)((0, $46MJV$depictaiutilishared.catchify)(()=>(0, $46MJV$solidjs.untrack)((0, $46MJV$depictaiutilishared.catchify)(()=>$1ee6da2465098194$var$history_state_change(signals, entries, history.state))))); // we need this to run after reading the initial state from history.state to write the defaults to history.state
     return signals;
 }
@@ -1192,8 +1195,11 @@ function $8d94abc871e13baf$export$3925f87b1545cfc6({ plp_results_: plp_results_
                                 }
                             }));
                         (0, $46MJV$solidjs.createEffect)((0, $46MJV$solidjs.on)(plp_results_, ()=>{
-                            if (!fallback_is_alive) // if all product card rendering functions after the initial rendering are synchronous the suspense boundary will never go into the fallback, so we don't know when they have finished rendering, and we can block the suspense. Therefore, we're just doing it with this effect
-                            block_suspense_if_needed();
+                            if (!fallback_is_alive) {
+                                // if all product card rendering functions after the initial rendering are synchronous the suspense boundary will never go into the fallback, so we don't know when they have finished rendering, and we can't block the suspense. Therefore, we're just doing it with this effect
+                                block_suspense_if_needed();
+                                set_should_have_placeholders_rendered(false);
+                            }
                         }, {
                             defer: true
                         }));
@@ -4159,7 +4165,10 @@ function $881cb1745bafff7a$var$OpenSortingButton({ i18n_: i18n_ , get_current_so
         (0, $46MJV$solidjsweb.setAttribute)(_el$12, "tabindex", tabindex_);
         (0, $46MJV$solidjsweb.insert)(_el$13, (()=>{
             const _c$ = (0, $46MJV$solidjsweb.memo)(()=>!!sorting_closed());
-            return ()=>_c$() && (meta_of_currently_selected_sorting_()?.title || available_sortings_()?.[0]?.meta?.title) || i18n_.sorting_text_();
+            return ()=>// Show the title of the currently selected sorting when the sorting is closed, if there's currently a sorting selected
+                // This is to balance that both it should be easy to find the sorting and to see what sorting currently is set
+                // See issue description of https://gitlab.com/depict-ai/depict.ai/-/merge_requests/6537
+                _c$() && meta_of_currently_selected_sorting_()?.title || i18n_.sorting_text_();
         })());
         (0, $46MJV$solidjsweb.insert)(_el$12, (0, $46MJV$solidjsweb.createComponent)((0, $46MJV$solidjs.Show), {
             get when () {

package/dist/module.js

@@ -1,9 +1,9 @@
-import {add_to_version_info as $g9l4l$add_to_version_info, fetch_recs as $g9l4l$fetch_recs, snakeCasifyObject as $g9l4l$snakeCasifyObject, GenericSliderArrowButton as $g9l4l$GenericSliderArrowButton, catchify as $g9l4l$catchify, base_url as $g9l4l$base_url, get_depict_id as $g9l4l$get_depict_id, get_user_id as $g9l4l$get_user_id, get_session_id as $g9l4l$get_session_id, dlog as $g9l4l$dlog, make_url_with_query_params as $g9l4l$make_url_with_query_params, fetch_retry as $g9l4l$fetch_retry, add_version_query_params as $g9l4l$add_version_query_params, sort_obj as $g9l4l$sort_obj, Placeholder as $g9l4l$Placeholder, report as $g9l4l$report, javascript_media_query as $g9l4l$javascript_media_query, standard_price_format as $g9l4l$standard_price_format, make_random_classname as $g9l4l$make_random_classname, n_col_styling_with_dist as $g9l4l$n_col_styling_with_dist, observer as $g9l4l$observer, CrossIcon as $g9l4l$CrossIcon, useExpandingContainer as $g9l4l$useExpandingContainer, Amazing_Slider as $g9l4l$Amazing_Slider, slider_snap_css as $g9l4l$slider_snap_css, slider_fading_factory as $g9l4l$slider_fading_factory, MinusIcon as $g9l4l$MinusIcon, FilterIcon as $g9l4l$FilterIcon, SortIconAsc as $g9l4l$SortIconAsc, SortIconDesc as $g9l4l$SortIconDesc, PlusIcon as $g9l4l$PlusIcon, hsl_to_rgb as $g9l4l$hsl_to_rgb, relative_luminance_from_rgb as $g9l4l$relative_luminance_from_rgb, TickIcon as $g9l4l$TickIcon, ArrowUp as $g9l4l$ArrowUp, queueMacroTask as $g9l4l$queueMacroTask, instant_exec_on_suspect_history_change as $g9l4l$instant_exec_on_suspect_history_change, dwarn as $g9l4l$dwarn, ContainedPlaceholderImage as $g9l4l$ContainedPlaceholderImage, BackIcon as $g9l4l$BackIcon, SearchIcon as $g9l4l$SearchIcon, Layout as $g9l4l$Layout, async_iterable_ipns as $g9l4l$async_iterable_ipns, make_asyncIterable_exiter as $g9l4l$make_asyncIterable_exiter, href_change_ipns as $g9l4l$href_change_ipns, ContainedImage as $g9l4l$ContainedImage, buildThresholdList as $g9l4l$buildThresholdList, deparallelize_no_drop as $g9l4l$deparallelize_no_drop, PreviousSearchIcon as $g9l4l$PreviousSearchIcon, insert_surfaces as $g9l4l$insert_surfaces} from "@depict-ai/utilishared";
+import {add_to_version_info as $g9l4l$add_to_version_info, fetch_recs as $g9l4l$fetch_recs, snakeCasifyObject as $g9l4l$snakeCasifyObject, GenericSliderArrowButton as $g9l4l$GenericSliderArrowButton, catchify as $g9l4l$catchify, instant_exec_on_suspect_history_change as $g9l4l$instant_exec_on_suspect_history_change, base_url as $g9l4l$base_url, get_depict_id as $g9l4l$get_depict_id, get_user_id as $g9l4l$get_user_id, get_session_id as $g9l4l$get_session_id, dlog as $g9l4l$dlog, make_url_with_query_params as $g9l4l$make_url_with_query_params, fetch_retry as $g9l4l$fetch_retry, add_version_query_params as $g9l4l$add_version_query_params, sort_obj as $g9l4l$sort_obj, Placeholder as $g9l4l$Placeholder, report as $g9l4l$report, javascript_media_query as $g9l4l$javascript_media_query, standard_price_format as $g9l4l$standard_price_format, make_random_classname as $g9l4l$make_random_classname, n_col_styling_with_dist as $g9l4l$n_col_styling_with_dist, observer as $g9l4l$observer, CrossIcon as $g9l4l$CrossIcon, useExpandingContainer as $g9l4l$useExpandingContainer, Amazing_Slider as $g9l4l$Amazing_Slider, slider_snap_css as $g9l4l$slider_snap_css, slider_fading_factory as $g9l4l$slider_fading_factory, MinusIcon as $g9l4l$MinusIcon, FilterIcon as $g9l4l$FilterIcon, SortIconAsc as $g9l4l$SortIconAsc, SortIconDesc as $g9l4l$SortIconDesc, PlusIcon as $g9l4l$PlusIcon, hsl_to_rgb as $g9l4l$hsl_to_rgb, relative_luminance_from_rgb as $g9l4l$relative_luminance_from_rgb, TickIcon as $g9l4l$TickIcon, ArrowUp as $g9l4l$ArrowUp, queueMacroTask as $g9l4l$queueMacroTask, dwarn as $g9l4l$dwarn, ContainedPlaceholderImage as $g9l4l$ContainedPlaceholderImage, BackIcon as $g9l4l$BackIcon, SearchIcon as $g9l4l$SearchIcon, Layout as $g9l4l$Layout, async_iterable_ipns as $g9l4l$async_iterable_ipns, make_asyncIterable_exiter as $g9l4l$make_asyncIterable_exiter, href_change_ipns as $g9l4l$href_change_ipns, ContainedImage as $g9l4l$ContainedImage, buildThresholdList as $g9l4l$buildThresholdList, deparallelize_no_drop as $g9l4l$deparallelize_no_drop, PreviousSearchIcon as $g9l4l$PreviousSearchIcon, insert_surfaces as $g9l4l$insert_surfaces} from "@depict-ai/utilishared";
 import {template as $g9l4l$template, insert as $g9l4l$insert, effect as $g9l4l$effect, setAttribute as $g9l4l$setAttribute, createComponent as $g9l4l$createComponent, use as $g9l4l$use, memo as $g9l4l$memo, addEventListener as $g9l4l$addEventListener, delegateEvents as $g9l4l$delegateEvents, spread as $g9l4l$spread, classList as $g9l4l$classList, style as $g9l4l$style, Dynamic as $g9l4l$Dynamic, mergeProps as $g9l4l$mergeProps, className as $g9l4l$className} from "solid-js/web";
 import {createSignal as $g9l4l$createSignal, onCleanup as $g9l4l$onCleanup, createComputed as $g9l4l$createComputed, createRenderEffect as $g9l4l$createRenderEffect, createEffect as $g9l4l$createEffect, untrack as $g9l4l$untrack, batch as $g9l4l$batch, createResource as $g9l4l$createResource, createMemo as $g9l4l$createMemo, Show as $g9l4l$Show, createReaction as $g9l4l$createReaction, Suspense as $g9l4l$Suspense, on as $g9l4l$on, createRoot as $g9l4l$createRoot, ErrorBoundary as $g9l4l$ErrorBoundary, For as $g9l4l$For, getOwner as $g9l4l$getOwner, runWithOwner as $g9l4l$runWithOwner, Index as $g9l4l$Index} 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.81";
+/*! Depict.ai search and product listing SDK */ const $18bf1d29fb889cca$export$83d89fbfd8236492 = "0.0.83";
 
 
 
@@ -28,7 +28,9 @@ async function $e95f1855a5e3864f$export$58e808b1db15d3bc({ merchant: merchant ,
 function $014a147d094b0d08$export$e183a13865960371(params_to_default_value, router_) {
     const signals = {};
     const entries = Object.entries(params_to_default_value);
-    const event_handler = (0, $g9l4l$catchify)(({ state: state  })=>$014a147d094b0d08$var$history_state_change(signals, entries, state));
+    const event_handler = (0, $g9l4l$catchify)((what_happened, args)=>{
+        if (what_happened == "popstate") $014a147d094b0d08$var$history_state_change(signals, entries, args.state);
+    });
     // createRenderEffect because we need the instant execution so the signals always contain values, even before solid's render phase
     (0, $g9l4l$createRenderEffect)(()=>{
         let signal_changed = false;
@@ -44,8 +46,9 @@ function $014a147d094b0d08$export$e183a13865960371(params_to_default_value, rout
         }
         if (signal_changed) router_.navigate_.replace_state_(state);
     });
-    window.addEventListener("popstate", event_handler);
-    (0, $g9l4l$onCleanup)((0, $g9l4l$catchify)(()=>window.removeEventListener("popstate", event_handler)));
+    // history_dot_state_to_state needs to update after its signals after url_state does BUT in the same task (might even have to be in the same tick in the microtask queue). If we'd use window.addEventListener("popstate") it would be guaranteed to be too late since each event listener has its own task
+    (0, $g9l4l$instant_exec_on_suspect_history_change).add(event_handler);
+    (0, $g9l4l$onCleanup)((0, $g9l4l$catchify)(()=>(0, $g9l4l$instant_exec_on_suspect_history_change).delete(event_handler)));
     (0, $g9l4l$createEffect)((0, $g9l4l$catchify)(()=>(0, $g9l4l$untrack)((0, $g9l4l$catchify)(()=>$014a147d094b0d08$var$history_state_change(signals, entries, history.state))))); // we need this to run after reading the initial state from history.state to write the defaults to history.state
     return signals;
 }
@@ -1160,8 +1163,11 @@ function $57363319986950eb$export$3925f87b1545cfc6({ plp_results_: plp_results_
                                 }
                             }));
                         (0, $g9l4l$createEffect)((0, $g9l4l$on)(plp_results_, ()=>{
-                            if (!fallback_is_alive) // if all product card rendering functions after the initial rendering are synchronous the suspense boundary will never go into the fallback, so we don't know when they have finished rendering, and we can block the suspense. Therefore, we're just doing it with this effect
-                            block_suspense_if_needed();
+                            if (!fallback_is_alive) {
+                                // if all product card rendering functions after the initial rendering are synchronous the suspense boundary will never go into the fallback, so we don't know when they have finished rendering, and we can't block the suspense. Therefore, we're just doing it with this effect
+                                block_suspense_if_needed();
+                                set_should_have_placeholders_rendered(false);
+                            }
                         }, {
                             defer: true
                         }));
@@ -4127,7 +4133,10 @@ function $bf7fe049e78f975a$var$OpenSortingButton({ i18n_: i18n_ , get_current_so
         (0, $g9l4l$setAttribute)(_el$12, "tabindex", tabindex_);
         (0, $g9l4l$insert)(_el$13, (()=>{
             const _c$ = (0, $g9l4l$memo)(()=>!!sorting_closed());
-            return ()=>_c$() && (meta_of_currently_selected_sorting_()?.title || available_sortings_()?.[0]?.meta?.title) || i18n_.sorting_text_();
+            return ()=>// Show the title of the currently selected sorting when the sorting is closed, if there's currently a sorting selected
+                // This is to balance that both it should be easy to find the sorting and to see what sorting currently is set
+                // See issue description of https://gitlab.com/depict-ai/depict.ai/-/merge_requests/6537
+                _c$() && meta_of_currently_selected_sorting_()?.title || i18n_.sorting_text_();
         })());
         (0, $g9l4l$insert)(_el$12, (0, $g9l4l$createComponent)((0, $g9l4l$Show), {
             get when () {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depict-ai/ui",
-  "version": "0.0.81",
+  "version": "0.0.83",
   "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": [
@@ -92,9 +92,9 @@
     "ts-jest": "^29.0.3"
   },
   "dependencies": {
-    "@depict-ai/plp-styling": "^0.0.43",
-    "@depict-ai/types": "^0.0.33",
-    "@depict-ai/utilishared": "^0.0.85",
+    "@depict-ai/plp-styling": "^0.0.45",
+    "@depict-ai/types": "^0.0.35",
+    "@depict-ai/utilishared": "^0.0.87",
     "lz-string": "^1.4.4",
     "solid-js": "^1.7.3"
   },