@depict-ai/ui 0.0.67 → 0.0.68

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { Display, Elem, ColsAtSize, InfoForProcessing, Node_Array, RR_PostProcessor, RR_PreProcessor } from "@depict-ai/utilishared";
-import { Accessor, JSX, Setter, Signal } from "solid-js";
+import { JSX, Accessor, Setter, Signal } from "solid-js";
+import { useExpandingContainer, Display, Elem, ColsAtSize, InfoForProcessing, Node_Array, RR_PostProcessor, RR_PreProcessor } from "@depict-ai/utilishared";
 import { search_i18n as _search_i18n1 } from "../../../locales";
 import { SearchResponse } from "@depict-ai/types/api/SearchResponse";
 import { SearchRequest, SearchFilter } from "@depict-ai/types/api/SearchRequest";
@@ -9,7 +9,17 @@ import { SearchSuggestionsRequest } from "@depict-ai/types/api/SearchSuggestions
 import { ProductListingRequest } from "@depict-ai/types/api/ProductListingRequest";
 import { ProductListingResponse, BaseCategoryDisplay } from "@depict-ai/types/api/ProductListingResponse";
 import { JSX as _JSX1 } from "solid-js/types/jsx";
-export const version = "0.0.67";
+export const version = "0.0.68";
+/**
+ * Just like `useExpandingContainer` except that the children can be reactive solid-js signals, basically solid's JSX.Element instead of our JSX.Element
+ */
+export function useExpandingContainerReactive(...params: Parameters<typeof useExpandingContainer>): {
+    collapse: (collapsing_delay?: any, time_to_collapse?: any) => Promise<Animation | undefined>;
+    expand: (expanding_delay?: any, time_to_expand?: any) => Promise<Animation | undefined>;
+    ExpandingContainer: ({ children }: {
+        children: JSX.Element | (() => JSX.Element);
+    }) => HTMLElement;
+};
 type ExclusiveId = {
     categoryId: string;
     productId?: undefined;
@@ -322,6 +332,7 @@ type OpenModalArguments = [
         closing_animation_?: () => Promise<any>;
         class_list_?: Accessor<Record<string, boolean>>;
         selected_text_range_?: readonly [number | null, number | null] | [number | null, number | null];
+        dont_sync_search_field_value_except_on_submit_?: boolean;
     },
     on_dispose?: VoidFunction
 ];
@@ -463,6 +474,10 @@ type AlignedLocation = {
 type ModalLocation = AlignedLocation | CenteredLocation;
 type OpenModalParams<T extends Display> = ModalLocation & {
     search: DepictSearch<T>;
+    /**
+     * If true, the search field in the modal opened will be empty and de-coupled from the other SearchFields.
+     */
+    makesNewSearch?: boolean;
 };
 /**
  * Open the modal with support for alignment.

package/dist/main.js

@@ -6,6 +6,7 @@ function $parcel$export(e, n, v, s) {
   Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
 }
 
+$parcel$export(module.exports, "useExpandingContainerReactive", () => $404797169c268f7a$export$5bad61ecde080b1f);
 $parcel$export(module.exports, "fetchDepictRecommendations", () => $8c4e48a4bf96b284$export$58e808b1db15d3bc);
 $parcel$export(module.exports, "QuickLinks", () => $068a627cc18f7bb6$export$de035477d6fef996);
 $parcel$export(module.exports, "BreadCrumbs", () => $068a627cc18f7bb6$export$5b7c3ce0ebe51f86);
@@ -35,11 +36,36 @@ $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.67";
+/*! Depict.ai search and product listing SDK */ const $ae93561d5649a847$export$83d89fbfd8236492 = "0.0.68";
 
 
 
 
+
+
+function $404797169c268f7a$export$5bad61ecde080b1f(...params) {
+    const { collapse: collapse , expand: expand , ExpandingContainer: ExpandingContainer  } = (0, $46MJV$depictaiutilishared.useExpandingContainer)(...params);
+    return {
+        collapse: collapse,
+        expand: expand,
+        ExpandingContainer: ({ children: children  })=>{
+            // get reactive signals/solid's jsx elements into `ExpandingContainer`
+            const fake_div = document.createElement("div");
+            const outer_expanding = (0, $46MJV$solidjsweb.createComponent)(ExpandingContainer, {
+                children: [
+                    fake_div
+                ]
+            });
+            const parent = fake_div.parentElement;
+            fake_div.remove();
+            (0, $46MJV$solidjsweb.insert)(parent, children);
+            return outer_expanding;
+        }
+    };
+}
+
+
+
 async function $8c4e48a4bf96b284$export$58e808b1db15d3bc({ merchant: merchant , market: market , headers: headers , ...fetch_recs_options }) {
     return await (0, $46MJV$depictaiutilishared.fetch_recs)({
         tenant: merchant,
@@ -1123,30 +1149,6 @@ function $8d94abc871e13baf$var$wrap_template_to_throw_into_error_boundary(templa
 
 
 
-function $404797169c268f7a$export$5bad61ecde080b1f(...params) {
-    const { collapse: collapse , expand: expand , ExpandingContainer: ExpandingContainer  } = (0, $46MJV$depictaiutilishared.useExpandingContainer)(...params);
-    return {
-        collapse: collapse,
-        expand: expand,
-        ExpandingContainer: ({ children: children  })=>{
-            // get reactive signals/solid's jsx elements into `ExpandingContainer`
-            const fake_div = document.createElement("div");
-            const outer_expanding = (0, $46MJV$solidjsweb.createComponent)(ExpandingContainer, {
-                children: [
-                    fake_div
-                ]
-            });
-            const parent = fake_div.parentElement;
-            fake_div.remove();
-            (0, $46MJV$solidjsweb.insert)(parent, children);
-            return outer_expanding;
-        }
-    };
-}
-
-
-
-
 
 
 
@@ -6846,8 +6848,26 @@ function $4a976b492943589f$export$f021bdedd3ec901a(props) {
 
 
 const $121d25ca6af2898f$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<div class="discover-more"><button class="major" type="button"></button></div>`, 4), $121d25ca6af2898f$var$_tmpl$2 = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<b></b>`, 2), $121d25ca6af2898f$var$_tmpl$3 = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<div class="depict-search-modal"><div class="body"><div class="padded"></div></div></div>`, 6), $121d25ca6af2898f$var$_tmpl$4 = /*@__PURE__*/ (0, /*@__PURE__*/$46MJV$solidjsweb.template)(`<div class="depict plp search"><div class="depict-search-modal-backdrop"></div></div>`, 4);
-function $121d25ca6af2898f$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, $46MJV$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_ , navigate_page_to_href_: navigate_page_to_href_ , on_submit_with_unchanged_value_: on_submit_with_unchanged_value_ , selected_text_range_: selected_text_range_  }) {
+function $121d25ca6af2898f$export$1c593cbd6f1e10bc({ search_field_value_: props_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, $46MJV$solidjs.createSignal)({}) , depict_api_: depict_api_ , tenant_: tenant_ , market_: market_ , submit_query_: props_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_: props_after_submit , bottom_distance_under_modal_: bottom_distance_under_modal_ , navigate_page_to_href_: navigate_page_to_href_ , on_submit_with_unchanged_value_: on_submit_with_unchanged_value_ , selected_text_range_: selected_text_range_ , dont_sync_search_field_value_except_on_submit_: dont_sync_search_field_value_except_on_submit_ = false  }) {
     let on_enter_in_search_field_function;
+    // As per feedback from stronger we sometimes want a modal with the search field value disconnected from the one in the rest of the UI, see https://depictaiworkspace.slack.com/archives/C02J16R9XEH/p1679065878487709.
+    // This is desired for when the modal is opened from a UI element that visually does not look connected with the search page or current query
+    // Basically the UI signals that the button that opens the modal starts a new search.
+    const search_field_value_ = dont_sync_search_field_value_except_on_submit_ ? (0, $46MJV$solidjs.createSignal)("") : props_search_field_value;
+    const propagate_search_field_value_back = dont_sync_search_field_value_except_on_submit_ ? ()=>props_search_field_value[1]((0, $46MJV$solidjs.untrack)(search_field_value_[0])) // Set actual search field value to the throwaway internal one before submitting
+     : undefined;
+    const submit_query_ = (...args)=>{
+        // submit_query expects to read the current search field value which is why we have to write the current one to the signal before calling it
+        // It will write the old one back and then write the new one after submit
+        propagate_search_field_value_back?.();
+        return props_submit_query(...args);
+    };
+    const after_submit_ = props_after_submit && ((...args)=>{
+        // This will be called by link_to_param_change when clicking on a suggestion
+        // the logic in link_to_param_change doesn't need to read the search field value before submitting, so we can just propagate the changes after submitting
+        propagate_search_field_value_back?.();
+        return props_after_submit(...args);
+    });
     const [input_field, set_input_field] = (0, $46MJV$solidjs.createSignal)();
     const [get_search_field_value_] = search_field_value_;
     const [elements_outside_scrollable, set_elements_outside_scrollable] = (0, $46MJV$solidjs.createSignal)();
@@ -6870,7 +6890,7 @@ function $121d25ca6af2898f$export$1c593cbd6f1e10bc({ search_field_value_: search
             (matches ? set_elements_outside_scrollable : set_elements_inside_scrollable)("");
             (matches ? set_elements_inside_scrollable : set_elements_outside_scrollable)((()=>{
                 const _el$ = $121d25ca6af2898f$var$_tmpl$.cloneNode(true), _el$2 = _el$.firstChild;
-                (0, $46MJV$solidjsweb.addEventListener)(_el$2, "click", submit_query_, true);
+                _el$2.$$click = submit_query_;
                 (0, $46MJV$solidjsweb.insert)(_el$2, (()=>{
                     const _c$ = (0, $46MJV$solidjsweb.memo)(()=>!!get_search_field_value_());
                     return ()=>_c$() ? i18n_.modal_view_all_results_()((()=>{
@@ -7592,7 +7612,6 @@ class $79fbf145b15af988$export$ac6237957a15b3f0 {
                 }
                 if (!open_signal_value[0]?.style_props_ && search_page_aligned_modal_body_style_signal_) {
                     // Open modal aligned with search page if no alignment specified and possible to align with search page
-                    // TODO: nice to have: align with most visible SearchField if possible since that's always more desirable than centering
                     if (!signal_value_is_options) {
                         open_modal_({
                             style_props_: search_page_aligned_modal_body_style_signal_
@@ -7623,7 +7642,7 @@ class $79fbf145b15af988$export$ac6237957a15b3f0 {
                     const [options_arg, ...rest] = open_signal_value;
                     open_modal_({
                         ...options_arg,
-                        style_props_: search_page_aligned_modal_body_style_signal_
+                        style_props_: search_page_aligned_modal_body_style_signal_ || style_props_
                     }, ...rest);
                     return;
                 }
@@ -7832,18 +7851,26 @@ function $79fbf145b15af988$var$align_field_modal(style_props_, input, aligner_re
 
 
 const $9c5a1d57540c06e5$export$d86a33413558014e = (openModalParams)=>{
-    const { search: search  } = openModalParams;
+    const { search: search , makesNewSearch: makesNewSearch = true  } = openModalParams;
     openModalParams.location ||= "centered";
     if (openModalParams.location === "aligned" && !openModalParams.element) throw new Error("No active search header aligner on the page!");
     if (openModalParams.location !== "aligned") {
         // Open centered modal
-        search.modal_open = true;
+        search.modal_open = [
+            {
+                dont_sync_search_field_value_except_on_submit_: makesNewSearch
+            }
+        ];
         return;
     }
     const alignment_height = openModalParams.element?.clientHeight;
     if (isNaN(alignment_height)) {
         // Open centered modal
-        search.modal_open = true;
+        search.modal_open = [
+            {
+                dont_sync_search_field_value_except_on_submit_: makesNewSearch
+            }
+        ];
         return;
     }
     const { cleanup: cleanup  } = (0, $246e3e89a097f014$export$828dcdd425fd3231)(openModalParams.element);
@@ -7862,7 +7889,8 @@ const $9c5a1d57540c06e5$export$d86a33413558014e = (openModalParams)=>{
     });
     search.modal_open = [
         {
-            style_props_: style_props_
+            style_props_: style_props_,
+            dont_sync_search_field_value_except_on_submit_: makesNewSearch
         },
         dispose_aligner
     ];

package/dist/module.js

@@ -1,12 +1,37 @@
-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, Tenant as $g9l4l$Tenant, Placeholder as $g9l4l$Placeholder, report as $g9l4l$report, javascript_media_query as $g9l4l$javascript_media_query, standard_price_format as $g9l4l$standard_price_format, deparallelize_no_drop as $g9l4l$deparallelize_no_drop, default_rr as $g9l4l$default_rr, make_random_classname as $g9l4l$make_random_classname, n_col_styling_with_dist as $g9l4l$n_col_styling_with_dist, observer as $g9l4l$observer, Lazyfier as $g9l4l$Lazyfier, queueMacroTask as $g9l4l$queueMacroTask, deparallelize as $g9l4l$deparallelize, Rec_Renderer as $g9l4l$Rec_Renderer, 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, normal_get_product_id as $g9l4l$normal_get_product_id, ContainedPlaceholderImage as $g9l4l$ContainedPlaceholderImage, BackIcon as $g9l4l$BackIcon, SearchIcon as $g9l4l$SearchIcon, Layout as $g9l4l$Layout, make_placeholder_rr as $g9l4l$make_placeholder_rr, async_iterable_ipns as $g9l4l$async_iterable_ipns, make_asyncIterable_exiter as $g9l4l$make_asyncIterable_exiter, href_change_ipns as $g9l4l$href_change_ipns, depict_click as $g9l4l$depict_click, impression_track_element as $g9l4l$impression_track_element, add_new_tab_listener as $g9l4l$add_new_tab_listener, ContainedImage as $g9l4l$ContainedImage, buildThresholdList as $g9l4l$buildThresholdList, PreviousSearchIcon as $g9l4l$PreviousSearchIcon, insert_surfaces as $g9l4l$insert_surfaces, instant_exec_on_popstate_before_ipns_update as $g9l4l$instant_exec_on_popstate_before_ipns_update} 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, addEventListener as $g9l4l$addEventListener, delegateEvents as $g9l4l$delegateEvents, spread as $g9l4l$spread, classList as $g9l4l$classList, memo as $g9l4l$memo, style as $g9l4l$style, mergeProps as $g9l4l$mergeProps, className as $g9l4l$className} from "solid-js/web";
+import {add_to_version_info as $g9l4l$add_to_version_info, useExpandingContainer as $g9l4l$useExpandingContainer, 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, Tenant as $g9l4l$Tenant, Placeholder as $g9l4l$Placeholder, report as $g9l4l$report, javascript_media_query as $g9l4l$javascript_media_query, standard_price_format as $g9l4l$standard_price_format, deparallelize_no_drop as $g9l4l$deparallelize_no_drop, default_rr as $g9l4l$default_rr, make_random_classname as $g9l4l$make_random_classname, n_col_styling_with_dist as $g9l4l$n_col_styling_with_dist, observer as $g9l4l$observer, Lazyfier as $g9l4l$Lazyfier, queueMacroTask as $g9l4l$queueMacroTask, deparallelize as $g9l4l$deparallelize, Rec_Renderer as $g9l4l$Rec_Renderer, CrossIcon as $g9l4l$CrossIcon, 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, normal_get_product_id as $g9l4l$normal_get_product_id, ContainedPlaceholderImage as $g9l4l$ContainedPlaceholderImage, BackIcon as $g9l4l$BackIcon, SearchIcon as $g9l4l$SearchIcon, Layout as $g9l4l$Layout, make_placeholder_rr as $g9l4l$make_placeholder_rr, async_iterable_ipns as $g9l4l$async_iterable_ipns, make_asyncIterable_exiter as $g9l4l$make_asyncIterable_exiter, href_change_ipns as $g9l4l$href_change_ipns, depict_click as $g9l4l$depict_click, impression_track_element as $g9l4l$impression_track_element, add_new_tab_listener as $g9l4l$add_new_tab_listener, ContainedImage as $g9l4l$ContainedImage, buildThresholdList as $g9l4l$buildThresholdList, PreviousSearchIcon as $g9l4l$PreviousSearchIcon, insert_surfaces as $g9l4l$insert_surfaces, instant_exec_on_popstate_before_ipns_update as $g9l4l$instant_exec_on_popstate_before_ipns_update} from "@depict-ai/utilishared";
+import {createComponent as $g9l4l$createComponent, insert as $g9l4l$insert, template as $g9l4l$template, effect as $g9l4l$effect, setAttribute as $g9l4l$setAttribute, use as $g9l4l$use, addEventListener as $g9l4l$addEventListener, delegateEvents as $g9l4l$delegateEvents, spread as $g9l4l$spread, classList as $g9l4l$classList, memo as $g9l4l$memo, style as $g9l4l$style, 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, 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";
 
-/*! Depict.ai search and product listing SDK */ const $18bf1d29fb889cca$export$83d89fbfd8236492 = "0.0.67";
+/*! Depict.ai search and product listing SDK */ const $18bf1d29fb889cca$export$83d89fbfd8236492 = "0.0.68";
 
 
 
 
+
+
+function $198845c3fc59215a$export$5bad61ecde080b1f(...params) {
+    const { collapse: collapse , expand: expand , ExpandingContainer: ExpandingContainer  } = (0, $g9l4l$useExpandingContainer)(...params);
+    return {
+        collapse: collapse,
+        expand: expand,
+        ExpandingContainer: ({ children: children  })=>{
+            // get reactive signals/solid's jsx elements into `ExpandingContainer`
+            const fake_div = document.createElement("div");
+            const outer_expanding = (0, $g9l4l$createComponent)(ExpandingContainer, {
+                children: [
+                    fake_div
+                ]
+            });
+            const parent = fake_div.parentElement;
+            fake_div.remove();
+            (0, $g9l4l$insert)(parent, children);
+            return outer_expanding;
+        }
+    };
+}
+
+
+
 async function $e95f1855a5e3864f$export$58e808b1db15d3bc({ merchant: merchant , market: market , headers: headers , ...fetch_recs_options }) {
     return await (0, $g9l4l$fetch_recs)({
         tenant: merchant,
@@ -1090,30 +1115,6 @@ function $57363319986950eb$var$wrap_template_to_throw_into_error_boundary(templa
 
 
 
-function $198845c3fc59215a$export$5bad61ecde080b1f(...params) {
-    const { collapse: collapse , expand: expand , ExpandingContainer: ExpandingContainer  } = (0, $g9l4l$useExpandingContainer)(...params);
-    return {
-        collapse: collapse,
-        expand: expand,
-        ExpandingContainer: ({ children: children  })=>{
-            // get reactive signals/solid's jsx elements into `ExpandingContainer`
-            const fake_div = document.createElement("div");
-            const outer_expanding = (0, $g9l4l$createComponent)(ExpandingContainer, {
-                children: [
-                    fake_div
-                ]
-            });
-            const parent = fake_div.parentElement;
-            fake_div.remove();
-            (0, $g9l4l$insert)(parent, children);
-            return outer_expanding;
-        }
-    };
-}
-
-
-
-
 
 
 
@@ -6813,8 +6814,26 @@ function $b24f16c875c2baa6$export$f021bdedd3ec901a(props) {
 
 
 const $a9f6faeac82c322b$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$g9l4l$template)(`<div class="discover-more"><button class="major" type="button"></button></div>`, 4), $a9f6faeac82c322b$var$_tmpl$2 = /*@__PURE__*/ (0, /*@__PURE__*/$g9l4l$template)(`<b></b>`, 2), $a9f6faeac82c322b$var$_tmpl$3 = /*@__PURE__*/ (0, /*@__PURE__*/$g9l4l$template)(`<div class="depict-search-modal"><div class="body"><div class="padded"></div></div></div>`, 6), $a9f6faeac82c322b$var$_tmpl$4 = /*@__PURE__*/ (0, /*@__PURE__*/$g9l4l$template)(`<div class="depict plp search"><div class="depict-search-modal-backdrop"></div></div>`, 4);
-function $a9f6faeac82c322b$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, $g9l4l$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_ , navigate_page_to_href_: navigate_page_to_href_ , on_submit_with_unchanged_value_: on_submit_with_unchanged_value_ , selected_text_range_: selected_text_range_  }) {
+function $a9f6faeac82c322b$export$1c593cbd6f1e10bc({ search_field_value_: props_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, $g9l4l$createSignal)({}) , depict_api_: depict_api_ , tenant_: tenant_ , market_: market_ , submit_query_: props_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_: props_after_submit , bottom_distance_under_modal_: bottom_distance_under_modal_ , navigate_page_to_href_: navigate_page_to_href_ , on_submit_with_unchanged_value_: on_submit_with_unchanged_value_ , selected_text_range_: selected_text_range_ , dont_sync_search_field_value_except_on_submit_: dont_sync_search_field_value_except_on_submit_ = false  }) {
     let on_enter_in_search_field_function;
+    // As per feedback from stronger we sometimes want a modal with the search field value disconnected from the one in the rest of the UI, see https://depictaiworkspace.slack.com/archives/C02J16R9XEH/p1679065878487709.
+    // This is desired for when the modal is opened from a UI element that visually does not look connected with the search page or current query
+    // Basically the UI signals that the button that opens the modal starts a new search.
+    const search_field_value_ = dont_sync_search_field_value_except_on_submit_ ? (0, $g9l4l$createSignal)("") : props_search_field_value;
+    const propagate_search_field_value_back = dont_sync_search_field_value_except_on_submit_ ? ()=>props_search_field_value[1]((0, $g9l4l$untrack)(search_field_value_[0])) // Set actual search field value to the throwaway internal one before submitting
+     : undefined;
+    const submit_query_ = (...args)=>{
+        // submit_query expects to read the current search field value which is why we have to write the current one to the signal before calling it
+        // It will write the old one back and then write the new one after submit
+        propagate_search_field_value_back?.();
+        return props_submit_query(...args);
+    };
+    const after_submit_ = props_after_submit && ((...args)=>{
+        // This will be called by link_to_param_change when clicking on a suggestion
+        // the logic in link_to_param_change doesn't need to read the search field value before submitting, so we can just propagate the changes after submitting
+        propagate_search_field_value_back?.();
+        return props_after_submit(...args);
+    });
     const [input_field, set_input_field] = (0, $g9l4l$createSignal)();
     const [get_search_field_value_] = search_field_value_;
     const [elements_outside_scrollable, set_elements_outside_scrollable] = (0, $g9l4l$createSignal)();
@@ -6837,7 +6856,7 @@ function $a9f6faeac82c322b$export$1c593cbd6f1e10bc({ search_field_value_: search
             (matches ? set_elements_outside_scrollable : set_elements_inside_scrollable)("");
             (matches ? set_elements_inside_scrollable : set_elements_outside_scrollable)((()=>{
                 const _el$ = $a9f6faeac82c322b$var$_tmpl$.cloneNode(true), _el$2 = _el$.firstChild;
-                (0, $g9l4l$addEventListener)(_el$2, "click", submit_query_, true);
+                _el$2.$$click = submit_query_;
                 (0, $g9l4l$insert)(_el$2, (()=>{
                     const _c$ = (0, $g9l4l$memo)(()=>!!get_search_field_value_());
                     return ()=>_c$() ? i18n_.modal_view_all_results_()((()=>{
@@ -7559,7 +7578,6 @@ class $540e930c58500cbe$export$ac6237957a15b3f0 {
                 }
                 if (!open_signal_value[0]?.style_props_ && search_page_aligned_modal_body_style_signal_) {
                     // Open modal aligned with search page if no alignment specified and possible to align with search page
-                    // TODO: nice to have: align with most visible SearchField if possible since that's always more desirable than centering
                     if (!signal_value_is_options) {
                         open_modal_({
                             style_props_: search_page_aligned_modal_body_style_signal_
@@ -7590,7 +7608,7 @@ class $540e930c58500cbe$export$ac6237957a15b3f0 {
                     const [options_arg, ...rest] = open_signal_value;
                     open_modal_({
                         ...options_arg,
-                        style_props_: search_page_aligned_modal_body_style_signal_
+                        style_props_: search_page_aligned_modal_body_style_signal_ || style_props_
                     }, ...rest);
                     return;
                 }
@@ -7799,18 +7817,26 @@ function $540e930c58500cbe$var$align_field_modal(style_props_, input, aligner_re
 
 
 const $7cbfd6122dbaf087$export$d86a33413558014e = (openModalParams)=>{
-    const { search: search  } = openModalParams;
+    const { search: search , makesNewSearch: makesNewSearch = true  } = openModalParams;
     openModalParams.location ||= "centered";
     if (openModalParams.location === "aligned" && !openModalParams.element) throw new Error("No active search header aligner on the page!");
     if (openModalParams.location !== "aligned") {
         // Open centered modal
-        search.modal_open = true;
+        search.modal_open = [
+            {
+                dont_sync_search_field_value_except_on_submit_: makesNewSearch
+            }
+        ];
         return;
     }
     const alignment_height = openModalParams.element?.clientHeight;
     if (isNaN(alignment_height)) {
         // Open centered modal
-        search.modal_open = true;
+        search.modal_open = [
+            {
+                dont_sync_search_field_value_except_on_submit_: makesNewSearch
+            }
+        ];
         return;
     }
     const { cleanup: cleanup  } = (0, $a79ffb1cbfbd2a09$export$828dcdd425fd3231)(openModalParams.element);
@@ -7829,7 +7855,8 @@ const $7cbfd6122dbaf087$export$d86a33413558014e = (openModalParams)=>{
     });
     search.modal_open = [
         {
-            style_props_: style_props_
+            style_props_: style_props_,
+            dont_sync_search_field_value_except_on_submit_: makesNewSearch
         },
         dispose_aligner
     ];
@@ -8055,4 +8082,4 @@ class $ba6c9609228edf6b$export$3ccaa27d81dd8556 extends EventTarget {
 (0, $g9l4l$add_to_version_info)("ui", (0, $18bf1d29fb889cca$export$83d89fbfd8236492));
 
 
-export {$e95f1855a5e3864f$export$58e808b1db15d3bc as fetchDepictRecommendations, $ec52ef1e6c117813$export$de035477d6fef996 as QuickLinks, $ec52ef1e6c117813$export$5b7c3ce0ebe51f86 as BreadCrumbs, $6340962f8bafd049$export$b91cec6bdc6b32a1 as CategoryTitle, $9b693ea3ff420de6$export$824dde41348efed1 as embedded_num_products, $80a49d3809ecb080$export$643598a327b5833e as get_categories, $ec52ef1e6c117813$export$f34314aa9505732e as DepictCategory, $ec52ef1e6c117813$export$e2bf8ce7779e827e as CategoryPage, $540e930c58500cbe$export$ac6237957a15b3f0 as DepictSearch, $540e930c58500cbe$export$bde3eb976dfded9 as get_search_query_updating_blocked_signal, $540e930c58500cbe$export$f2dc7e4e4aa11abb as SearchPage, $540e930c58500cbe$export$316f6f283ae64765 as SearchField, $22d7fd594100c3d0$export$aa14a9f43128f61f as ProductCardError, $7cbfd6122dbaf087$export$d86a33413558014e as open_modal_with_alignment, $aaacfac0064e97d9$export$ee1733d9a8495996 as DefaultInstantCardPlaceholder, $079defea521d5e2a$export$b3ad617e9036868 as align_field, $b4e6a093ae83373b$export$6daf8749b65a1b77 as convert_sdk_cols_at_size_to_layout, $246aa49a8f85c7f3$export$1233ca167bf71f9a as styles_to_valid_css_string, $a1123c5ed9b0ee29$export$fe334901e8bebd57 as disable_scrolling, $a3e81b85527bc866$export$d0596b5cae35ad4 as open_search_with_shift_slash, $972ebf2641490830$export$26df08e242fe83a3 as push_state_with_query_param_value, $3846bb34098c738f$export$e015ed2f2950f2e3 as DepictAPI, $fefe7683325039b3$export$d9f36cf74e24d595 as media_query_to_accessor, $36316d7b4c897a03$export$689e204eadb33baf as setup_fast_leave, $886fa987db4f3805$export$5196e4c01fa56fcb as show_toast, $5178263ed1e394ca$export$469c7af753d08925 as solid_format_price, $a79ffb1cbfbd2a09$export$828dcdd425fd3231 as connect_search_field_height_to_aligner_height, $ba6c9609228edf6b$export$3ccaa27d81dd8556 as PageReplacer, $18bf1d29fb889cca$export$83d89fbfd8236492 as version};
+export {$198845c3fc59215a$export$5bad61ecde080b1f as useExpandingContainerReactive, $e95f1855a5e3864f$export$58e808b1db15d3bc as fetchDepictRecommendations, $ec52ef1e6c117813$export$de035477d6fef996 as QuickLinks, $ec52ef1e6c117813$export$5b7c3ce0ebe51f86 as BreadCrumbs, $6340962f8bafd049$export$b91cec6bdc6b32a1 as CategoryTitle, $9b693ea3ff420de6$export$824dde41348efed1 as embedded_num_products, $80a49d3809ecb080$export$643598a327b5833e as get_categories, $ec52ef1e6c117813$export$f34314aa9505732e as DepictCategory, $ec52ef1e6c117813$export$e2bf8ce7779e827e as CategoryPage, $540e930c58500cbe$export$ac6237957a15b3f0 as DepictSearch, $540e930c58500cbe$export$bde3eb976dfded9 as get_search_query_updating_blocked_signal, $540e930c58500cbe$export$f2dc7e4e4aa11abb as SearchPage, $540e930c58500cbe$export$316f6f283ae64765 as SearchField, $22d7fd594100c3d0$export$aa14a9f43128f61f as ProductCardError, $7cbfd6122dbaf087$export$d86a33413558014e as open_modal_with_alignment, $aaacfac0064e97d9$export$ee1733d9a8495996 as DefaultInstantCardPlaceholder, $079defea521d5e2a$export$b3ad617e9036868 as align_field, $b4e6a093ae83373b$export$6daf8749b65a1b77 as convert_sdk_cols_at_size_to_layout, $246aa49a8f85c7f3$export$1233ca167bf71f9a as styles_to_valid_css_string, $a1123c5ed9b0ee29$export$fe334901e8bebd57 as disable_scrolling, $a3e81b85527bc866$export$d0596b5cae35ad4 as open_search_with_shift_slash, $972ebf2641490830$export$26df08e242fe83a3 as push_state_with_query_param_value, $3846bb34098c738f$export$e015ed2f2950f2e3 as DepictAPI, $fefe7683325039b3$export$d9f36cf74e24d595 as media_query_to_accessor, $36316d7b4c897a03$export$689e204eadb33baf as setup_fast_leave, $886fa987db4f3805$export$5196e4c01fa56fcb as show_toast, $5178263ed1e394ca$export$469c7af753d08925 as solid_format_price, $a79ffb1cbfbd2a09$export$828dcdd425fd3231 as connect_search_field_height_to_aligner_height, $ba6c9609228edf6b$export$3ccaa27d81dd8556 as PageReplacer, $18bf1d29fb889cca$export$83d89fbfd8236492 as version};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depict-ai/ui",
-  "version": "0.0.67",
+  "version": "0.0.68",
   "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": [
@@ -86,7 +86,7 @@
   "dependencies": {
     "@depict-ai/plp-styling": "^0.0.28",
     "@depict-ai/types": "^0.0.19",
-    "@depict-ai/utilishared": "^0.0.64",
+    "@depict-ai/utilishared": "^0.0.73",
     "solid-js": "^1.6.2"
   },
   "types": "dist/index.d.ts"

package/dist/typescript_schema/BaseSearchRequest.d.ts

@@ -1,197 +0,0 @@
-/* tslint:disable */
-/**
- * This file was automatically generated by json-schema-to-typescript.
- * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
- * and run json-schema-to-typescript to regenerate this file.
- */
-
-/**
- * An enumeration.
- */
-export type SortingOrder = "asc" | "desc";
-
-export interface BaseSearchRequest {
-  tenant: string;
-  market: string;
-  /**
-   * List of filters to apply to the results.
-   */
-  filters?: SearchFilter[];
-  /**
-   * Specifies the sorting method. By default, the results are ordered by relevance. To find the possible values for this field, query the endpoint and look at the `sorts` field.
-   */
-  sort?: SortModel;
-  /**
-   * User identifier
-   */
-  user_id?: string;
-  /**
-   * Session identifier
-   */
-  session_id?: string;
-  /**
-   * Populated for integrations performed by Depict.ai only. Depict.ai Session Id
-   */
-  dsid?: string;
-  /**
-   * Metadata that can be used to modify the behaviour of the search.
-   */
-  metadata?: {
-    [k: string]: string;
-  };
-  /**
-   * The search query.
-   */
-  query?: string;
-}
-export interface SearchFilter {
-  /**
-   * The field to filter by.
-   */
-  field: string;
-  /**
-   * The operation used for filtering. The filtering should be read as `field op data`, for example `brand in ["Nike", "Adidas"]`.
-   */
-  op: "eq" | "neq" | "in" | "nin" | "leq" | "geq" | "inrange";
-  /**
-   * Data for the filter.
-   */
-  data?:
-    | ("true" | "false")
-    | number
-    | number
-    | string
-    | [number, number]
-    | [number, number]
-    | [number, number]
-    | [number, number]
-    | (
-        | ("true" | "false")
-        | number
-        | number
-        | string
-        | [number, number]
-        | [number, number]
-        | [number, number]
-        | [number, number]
-      )[]
-    | (("true" | "false") | number | number | string)[][];
-  /**
-   * Metadata about the filter that can be used for rendering. For example, this could contain the possible values to filter by and their counts in the results.
-   */
-  meta?: RangeFilterMeta | ValuesFilterMeta | HierarchicalValuesFilterMeta;
-  /**
-   * ID of the filter. If multiple filters share the same ID, they should be grouped together in the UI.
-   */
-  id?: string;
-}
-export interface RangeFilterMeta {
-  /**
-   * Title of the group, where a group consists of all the filters that share an ID.
-   */
-  group_title?: string;
-  /**
-   * Whether the filter group should be expanded by default or not.
-   */
-  group_expanded?: boolean;
-  type?: "range";
-  /**
-   * The minimum value that can be selected in the range.
-   */
-  min: number;
-  /**
-   * The maximum value that can be selected in the range.
-   */
-  max: number;
-  /**
-   * The unit of the range values.
-   */
-  unit?: string;
-  /**
-   * The currency of the range values.
-   */
-  currency?: string;
-}
-export interface ValuesFilterMeta {
-  /**
-   * Title of the group, where a group consists of all the filters that share an ID.
-   */
-  group_title?: string;
-  /**
-   * Whether the filter group should be expanded by default or not.
-   */
-  group_expanded?: boolean;
-  /**
-   * Type of filter.
-   */
-  type?: "radio" | "checkbox" | "checkbox-grid";
-  /**
-   * Selectable values
-   */
-  values: (
-    | ("true" | "false")
-    | number
-    | number
-    | string
-    | [number, number]
-    | [number, number]
-    | [number, number]
-    | [number, number]
-  )[];
-  /**
-   * Counts for values
-   */
-  counts?: number[];
-  /**
-   * Names for values
-   */
-  names?: string[];
-}
-export interface HierarchicalValuesFilterMeta {
-  /**
-   * Title of the group, where a group consists of all the filters that share an ID.
-   */
-  group_title?: string;
-  /**
-   * Whether the filter group should be expanded by default or not.
-   */
-  group_expanded?: boolean;
-  type?: "checkbox-hierarchical";
-  /**
-   * Selectable hierarchical values
-   */
-  values: (("true" | "false") | number | number | string)[][];
-  /**
-   * Counts for values
-   */
-  counts?: number[];
-  /**
-   * Names for hierarchical values
-   */
-  names?: string[];
-}
-export interface SortModel {
-  /**
-   * The field to sort by.
-   */
-  field: string;
-  /**
-   * The order to sort by.
-   */
-  order: SortingOrder;
-  /**
-   * Metadata about the sort that can be used for rendering.
-   */
-  meta?: SortMeta;
-}
-export interface SortMeta {
-  title: string;
-  /**
-   * Selectable values
-   */
-  values?: SortingOrder[];
-  /**
-   * Names for orders
-   */
-  names?: string[];
-}

package/dist/typescript_schema/ProductListingQueriesRequest.d.ts

@@ -1,14 +0,0 @@
-/* tslint:disable */
-/**
- * This file was automatically generated by json-schema-to-typescript.
- * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
- * and run json-schema-to-typescript to regenerate this file.
- */
-
-export interface ProductListingQueriesRequest {
-  tenant: string;
-  market: string;
-  metadata?: {
-    [k: string]: string;
-  };
-}

package/dist/typescript_schema/ProductListingQueriesResponse.d.ts

@@ -1,10 +0,0 @@
-/* tslint:disable */
-/**
- * This file was automatically generated by json-schema-to-typescript.
- * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
- * and run json-schema-to-typescript to regenerate this file.
- */
-
-export interface ProductListingQueriesResponse {
-  query_ids?: string[];
-}