@depict-ai/ui 4.10.19 → 4.10.21

package/latest/index.js

@@ -7,7 +7,7 @@ import { createStore as $9HbP8$createStore, reconcile as $9HbP8$reconcile } from
 /*! Depict.ai search and product listing SDK */
 import { register_es_version } from "../multi_import_deduplicator.mjs";
 register_es_version("ui", "latest");
-const $ec291e0010116877$export$83d89fbfd8236492 = "4.10.19";
+const $ec291e0010116877$export$83d89fbfd8236492 = "4.10.21";
 function $dc9262ef6f786812$export$d9f36cf74e24d595(media_query) {
   const signal = $9HbP8$createSignal(false);
   $9HbP8$onCleanup($9HbP8$javascript_media_query(media_query, ({
@@ -2462,6 +2462,61 @@ function $1adfe60f3a14a1d7$export$fecbb157621501bd({
   return outmost_element;
 }
 $9HbP8$delegateEvents(["click"]);
+
+/**
+ * `HTMLElement.focus()` is a **silent no-op** on an element that is not being rendered
+ * (`display: none`, `visibility: hidden`, a collapsed menu). Nothing throws, focus simply
+ * stays where it was, so a caller that does not check believes it restored focus when it
+ * left it on `<body>` — which puts the keyboard user back at the top of the document.
+ *
+ * That is reachable whenever the element which opened a modal stops being rendered while the
+ * modal is open, and the common way for that to happen is the responsive-duplicate header:
+ * a theme renders the same search trigger twice, once for desktop and once for mobile, and
+ * hides one at the current breakpoint. Open the modal from the desktop trigger, cross the
+ * breakpoint (rotate a tablet, resize a window), close the modal, and the remembered trigger
+ * is still `isConnected` but no longer rendered. Verified against a live merchant storefront
+ * on 4.10.19.
+ *
+ * So: verify that focus landed, and when it did not, look for a rendered twin of the same
+ * control — the other half of the responsive pair — and use that instead.
+ */ /**
+    * An element can only take focus if it is actually being rendered.
+    *
+    * Injectable because it is the one part of this module that needs a layout engine: jsdom
+    * reports no client rects for anything, so the specs pass their own predicate to exercise the
+    * matching rules. The real predicate is only exercised in a browser.
+    */
+const $07001c226aedc5fb$export$e0652711c614c755 = element => !!element.getClientRects().length;
+/**
+ * `document.activeElement` is the outermost shadow host when focus is inside a shadow tree,
+ * so ask the element's own root rather than the document — matching how the rest of
+ * modal_opener treats shadow-mounted modals.
+ */
+const $07001c226aedc5fb$var$has_focus = element => element.getRootNode().activeElement === element;
+/**
+ * The accessible-name-ish identity we match twins on. Deliberately narrow: an explicit label
+ * or the trimmed text. Two controls that share a tag and this string are the same control
+ * rendered twice, which is exactly the responsive-duplicate case.
+ */
+const $07001c226aedc5fb$var$identity_of = element => (element.getAttribute("aria-label") || element.getAttribute("title") || element.textContent || "").trim().replace(/\s+/g, " ");
+function $07001c226aedc5fb$export$5800d9d535a06e96(element, rendered = $07001c226aedc5fb$export$e0652711c614c755) {
+  const identity = $07001c226aedc5fb$var$identity_of(element);
+  if (!identity) return; // nothing to match on — an icon-only button with no label
+  const twins = [...element.ownerDocument.querySelectorAll(element.localName)].filter(candidate => candidate !== element && rendered(candidate) && $07001c226aedc5fb$var$identity_of(candidate) === identity);
+  return twins.length === 1 ? twins[0] : undefined;
+}
+function $07001c226aedc5fb$export$51461d633c351649(element, rendered = $07001c226aedc5fb$export$e0652711c614c755) {
+  element.focus({
+    preventScroll: true
+  });
+  if ($07001c226aedc5fb$var$has_focus(element)) return true;
+  const twin = $07001c226aedc5fb$export$5800d9d535a06e96(element, rendered);
+  if (!twin) return false;
+  twin.focus({
+    preventScroll: true
+  });
+  return $07001c226aedc5fb$var$has_focus(twin);
+}
 async function $194bd6b8e4c59830$export$79b1565500412d9b(search_modal, modal_fn_opts, parent) {
   const body = parent || document.body || (await (0, $9HbP8$observer).wait_for_element("body"));
   let dispose_and_remove;
@@ -2491,6 +2546,7 @@ async function $194bd6b8e4c59830$export$79b1565500412d9b(search_modal, modal_fn_
     const modal_els = $9HbP8$createRoot(dispose => {
       let closing_animation;
       let animation_started;
+      let focus_target_after_close;
       dispose_and_remove = () => {
         const actually_close = () => {
           dispose();
@@ -2509,13 +2565,24 @@ async function $194bd6b8e4c59830$export$79b1565500412d9b(search_modal, modal_fn_
               activeElement?.blur?.();
             el.remove();
           });
-          if (should_restore_focus && element_focused_before_open?.isConnected) {
+          const requested_focus_target = focus_target_after_close?.();
+          if (should_restore_focus && (requested_focus_target?.isConnected || element_focused_before_open?.isConnected)) {
             restoring_focus = true;
             try {
               // preventScroll so this can't re-introduce the safari page-jump the blur() above works around
-              element_focused_before_open.focus({
-                preventScroll: true
-              });
+              let focused = false;
+              if (requested_focus_target?.isConnected) {
+                requested_focus_target.focus({
+                  preventScroll: true
+                });
+                focused = requested_focus_target.getRootNode().activeElement === requested_focus_target;
+              }
+              if (!focused && element_focused_before_open?.isConnected)
+                // restore_focus_to rather than a bare focus(): the remembered trigger can be
+                // connected but no longer rendered (a responsive-duplicate header whose other
+                // half is showing now), and focus() on an unrendered element silently does
+                // nothing, leaving the keyboard user at the top of the page.
+                $07001c226aedc5fb$export$51461d633c351649(element_focused_before_open);
             } finally {
               // Cleared on a task instead of synchronously in case a browser delivers the focus event async
               setTimeout(() => restoring_focus = false, 0);
@@ -2534,7 +2601,8 @@ async function $194bd6b8e4c59830$export$79b1565500412d9b(search_modal, modal_fn_
         ...extra_options_for_modal,
         close_modal_: close_modal_,
         open_modal_: open_modal_,
-        register_closing_animation_: animation => closing_animation = animation
+        register_closing_animation_: animation => closing_animation = animation,
+        set_focus_target_after_close_: get_target => focus_target_after_close = get_target
       });
     });
     body.append(...modal_els);
@@ -9155,16 +9223,20 @@ class $4fd2ba03703a7d92$export$7e1297a3a19f10d8 {
   * Function that will be called when we want to navigate, or a string saying it's not an SPA. You can change this OTG
   */ /**
      * We store listing_id in history.state and do operate on this both here and in js-ui, this is the key to be used which js-ui provides
-     */
-  #throwing_on_navigation(...args) {
+     */ /**
+        * Called when a go_to_ didn't change location.href, for example when following a link to the page one is already on. href_change_ipns stays silent then, so whoever waits for a href change to react to a navigation has to listen here too
+        */
+  navigation_to_same_href_listeners_ = new Set();
+  #throwing_on_navigation(options, on_throw_) {
     const {
       on_navigation_: on_navigation_
     } = this;
     if (typeof on_navigation_ !== "function") throw new Error("on_navigation_ is not a function");
     // make sure that we don't accidentally catchify if the SDK consumer has fucked up
     try {
-      return on_navigation_(...args);
+      return on_navigation_(options);
     } catch (e) {
+      on_throw_?.();
       queueMicrotask(() => {
         throw e;
       });
@@ -9185,6 +9257,28 @@ class $4fd2ba03703a7d92$export$7e1297a3a19f10d8 {
       (0, $9HbP8$instant_exec_on_suspect_history_change).add(handler);
     });
   }
+  /**
+  * Calls navigation_to_same_href_listeners_ if the navigation we're about to request ends on the href we're already on
+  * @returns function to stop watching, call it when the navigation failed
+  */
+  #watch_for_navigation_to_same_href(target_url) {
+    const href_before = location.href;
+    const stop_watching = () => {
+      (0, $9HbP8$instant_exec_on_suspect_history_change).delete(on_history_change);
+      clearTimeout(timeout);
+    };
+    const notify_if_href_unchanged = $9HbP8$catchify1(() => {
+      stop_watching();
+      if (location.href !== href_before) return;
+      this.navigation_to_same_href_listeners_.forEach(listener => $9HbP8$catchify1(listener)());
+    });
+    // The router has acted once it touches history, if the href is still the same then it took us to the page we're on
+    const on_history_change = () => notify_if_href_unchanged();
+    // A router asked to go to the exact href we're on might not touch history at all, so don't wait longer than 500ms for it. For any other target we can't tell a slow navigation from one that goes nowhere, so only stop listening after a while
+    const timeout = target_url.href === href_before ? setTimeout(notify_if_href_unchanged, 500) : setTimeout(stop_watching, 10000);
+    (0, $9HbP8$instant_exec_on_suspect_history_change).add(on_history_change);
+    return stop_watching;
+  }
   navigate_ = {
     /**
     * Call this if you *just* want to replace the state object in history.state
@@ -9224,6 +9318,7 @@ class $4fd2ba03703a7d92$export$7e1297a3a19f10d8 {
       }
       event_?.preventDefault();
       const promise = this.#get_navigation_happened_promise(true);
+      const stop_watching_for_same_href = this.#watch_for_navigation_to_same_href(new_url_);
       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;
@@ -9237,7 +9332,7 @@ class $4fd2ba03703a7d92$export$7e1297a3a19f10d8 {
         is_replace: is_replace_,
         new_url: new_url_ instanceof URL ? new_url_ : new URL(new_url_, location.href),
         scroll: scroll
-      });
+      }, stop_watching_for_same_href);
       await promise;
     })
   };
@@ -10706,6 +10801,7 @@ var $5285d2814d0fac0c$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<button class=b
   $5285d2814d0fac0c$var$_tmpl$3 = /*#__PURE__*/$9HbP8$template(`<div class=spacer>`),
   $5285d2814d0fac0c$var$_tmpl$4 = /*#__PURE__*/$9HbP8$template(`<button class="submit major"type=button>`),
   $5285d2814d0fac0c$var$_tmpl$5 = /*#__PURE__*/$9HbP8$template(`<div><!$><!/><!$><!/><div class=field><!$><!/><input class=query tabindex=0 enterkeyhint=search><!$><!/></div><!$><!/><!$><!/>`);
+const $5285d2814d0fac0c$var$keys_not_opening_modal = new Set(["Tab", "Shift", "Control", "Alt", "AltGraph", "Meta", "CapsLock", "Escape", "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "PageUp", "PageDown", "Home", "End", "Insert", "ContextMenu", "NumLock", "ScrollLock", "Pause", "PrintScreen"]);
 function $5285d2814d0fac0c$export$b94867ecbd698f21({
   search_field_value_: [searchFieldValue, setSearchFieldValue],
   input_field_ref_: input_field_ref_,
@@ -10883,7 +10979,7 @@ function $5285d2814d0fac0c$export$b94867ecbd698f21({
       get onKeyDown() {
         return $9HbP8$catchify1(e => {
           if (disabled_) {
-            if (e.key !== "Tab" && e.key !== "Shift")
+            if (!$5285d2814d0fac0c$var$keys_not_opening_modal.has(e.key) && !/^F\d{1,2}$/.test(e.key))
               // alow tab-selecting the input field and then open the modal when the user start writing but also to move past the field with tab
               input_element.click();
           } else if (e.key === "Enter") {
@@ -10963,11 +11059,17 @@ var $ffb84ffbf4014982$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<svg xmlns=http
 function $ffb84ffbf4014982$export$8d8893ffd8aca39a() {
   return $9HbP8$getNextElement($ffb84ffbf4014982$var$_tmpl$);
 }
-function $512b994d501f412b$export$93d9bfd0c9c1a5b8(close_modal, search_query_url_param_name_) {
+function $512b994d501f412b$export$93d9bfd0c9c1a5b8(close_modal, search_query_url_param_name_, router_) {
   const [exit_iterable, exitable_iterable] = $9HbP8$make_asyncIterable_exiter((0, $9HbP8$href_change_ipns));
+  const {
+    navigation_to_same_href_listeners_: navigation_to_same_href_listeners_
+  } = router_;
   let set_initial_values = false;
   let old_pathname;
   let old_param_value;
+  // A card linking to the page one is already on doesn't change the href, close the modal anyway so the click does something
+  navigation_to_same_href_listeners_.add(close_modal);
+  $9HbP8$onCleanup(() => navigation_to_same_href_listeners_.delete(close_modal));
   $9HbP8$onCleanup($9HbP8$catchify1(exit_iterable));
   $9HbP8$catchify1(async () => {
     for await (const href of exitable_iterable) {
@@ -10986,6 +11088,31 @@ function $512b994d501f412b$export$93d9bfd0c9c1a5b8(close_modal, search_query_url
     }
   })();
 }
+function $8b2ecf1919837863$export$9e9e2ae069cf2fe1({
+  props_search_field_value_: props_search_field_value_,
+  props_submit_query_: props_submit_query_,
+  dont_sync_search_field_value_except_on_submit_: dont_sync_search_field_value_except_on_submit_,
+  set_focus_target_after_close_: set_focus_target_after_close_,
+  get_search_page_input_element_: get_search_page_input_element_
+}) {
+  const search_field_value_ = dont_sync_search_field_value_except_on_submit_ ? $9HbP8$createSignal("") : props_search_field_value_;
+  let submits_in_flight = 0;
+  const submit_query_ = async (new_query = $9HbP8$untrack(search_field_value_[0])) => {
+    submits_in_flight++;
+    try {
+      return await props_submit_query_(new_query, () => set_focus_target_after_close_(get_search_page_input_element_));
+    } finally {
+      submits_in_flight--;
+    }
+  };
+  if (dont_sync_search_field_value_except_on_submit_) $9HbP8$createEffect($9HbP8$on(search_field_value_[0], value => submits_in_flight > 0 && props_search_field_value_[1](value), {
+    defer: true
+  }));
+  return {
+    search_field_value_: search_field_value_,
+    submit_query_: submit_query_
+  };
+}
 var $42912431795f188e$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<div class=discover-more><button class=major type=button>`),
   $42912431795f188e$var$_tmpl$2 = /*#__PURE__*/$9HbP8$template(`<b>`),
   $42912431795f188e$var$_tmpl$3 = /*#__PURE__*/$9HbP8$template(`<div class=depict-search-modal><div class=body role=search aria-label="Search modal with search field, query suggestions and result preview"><!$><!/><div id=depict-suggestions-and-result-preview class=padded><!$><!/><!$><!/><!$><!/></div><!$><!/></div><!$><!/>`),
@@ -10999,6 +11126,8 @@ function $42912431795f188e$var$RawClassicSearchModal({
   search_query_url_param_name_: search_query_url_param_name_,
   previous_searches_: previous_searches_,
   close_modal_: close_modal_,
+  set_focus_target_after_close_: set_focus_target_after_close_,
+  get_search_page_input_element_: get_search_page_input_element_,
   depict_api_: depict_api_,
   merchant_: merchant_,
   market_: market_,
@@ -11023,15 +11152,16 @@ function $42912431795f188e$var$RawClassicSearchModal({
   // 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_ ? $9HbP8$createSignal("") : props_search_field_value;
-  const propagate_search_field_value_back = dont_sync_search_field_value_except_on_submit_ ? () => props_search_field_value[1]($9HbP8$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 {
+    search_field_value_: search_field_value_,
+    submit_query_: submit_query_
+  } = $8b2ecf1919837863$export$9e9e2ae069cf2fe1({
+    props_search_field_value_: props_search_field_value,
+    props_submit_query_: props_submit_query,
+    dont_sync_search_field_value_except_on_submit_: dont_sync_search_field_value_except_on_submit_,
+    set_focus_target_after_close_: set_focus_target_after_close_,
+    get_search_page_input_element_: get_search_page_input_element_
+  });
   const [input_field, set_input_field] = $9HbP8$createSignal();
   const [get_search_field_value_] = search_field_value_;
   // Search field alignment unused in ClassicSearchModal since the search field spans the whole modal
@@ -11095,7 +11225,7 @@ function $42912431795f188e$var$RawClassicSearchModal({
     return _el$;
   })();
   if (disable_scrolling_) $aea1edf92433e81e$export$fe334901e8bebd57();
-  $512b994d501f412b$export$93d9bfd0c9c1a5b8(close_modal_, search_query_url_param_name_);
+  $512b994d501f412b$export$93d9bfd0c9c1a5b8(close_modal_, search_query_url_param_name_, router_);
   window.addEventListener("keydown", close_on_escape_handler);
   $9HbP8$onCleanup($9HbP8$catchify1(() => window.removeEventListener("keydown", close_on_escape_handler)));
   if (closing_animation_) register_closing_animation_(closing_animation_);
@@ -11826,6 +11956,8 @@ function $500a16dd18ee5a71$var$RawSearchModalV2({
   search_query_url_param_name_: search_query_url_param_name_,
   previous_searches_: previous_searches_,
   close_modal_: close_modal_,
+  set_focus_target_after_close_: set_focus_target_after_close_,
+  get_search_page_input_element_: get_search_page_input_element_,
   alignmentSignals_: alignmentSignals_,
   depict_api_: depict_api_,
   merchant_: merchant_,
@@ -11856,15 +11988,16 @@ function $500a16dd18ee5a71$var$RawSearchModalV2({
   // 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_ ? $9HbP8$createSignal("") : props_search_field_value;
-  const propagate_search_field_value_back = dont_sync_search_field_value_except_on_submit_ ? () => props_search_field_value[1]($9HbP8$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 {
+    search_field_value_: search_field_value_,
+    submit_query_: submit_query_
+  } = $8b2ecf1919837863$export$9e9e2ae069cf2fe1({
+    props_search_field_value_: props_search_field_value,
+    props_submit_query_: props_submit_query,
+    dont_sync_search_field_value_except_on_submit_: dont_sync_search_field_value_except_on_submit_,
+    set_focus_target_after_close_: set_focus_target_after_close_,
+    get_search_page_input_element_: get_search_page_input_element_
+  });
   const [input_field, set_input_field] = $9HbP8$createSignal();
   const [searching_for_value_, set_searching_for_value_] = $9HbP8$createSignal();
   const [show_stale_content_results_, set_show_stale_content_results_] = $9HbP8$createSignal(false);
@@ -11971,7 +12104,7 @@ function $500a16dd18ee5a71$var$RawSearchModalV2({
   });
   const noResults = $9HbP8$createMemo(prev => (get_modal_search_results_()?.loading === false && !suggestions_response_.loading || !!prev) && totalNumberResults() === 0 && previous_searches_matching_query().length === 0);
   if (disable_scrolling_) $aea1edf92433e81e$export$fe334901e8bebd57();
-  $512b994d501f412b$export$93d9bfd0c9c1a5b8(close_modal_, search_query_url_param_name_);
+  $512b994d501f412b$export$93d9bfd0c9c1a5b8(close_modal_, search_query_url_param_name_, router_);
   addEventListener("keydown", close_on_escape_handler);
   $9HbP8$onCleanup(() => removeEventListener("keydown", close_on_escape_handler));
   $9HbP8$createEffect($9HbP8$on(get_search_field_value_, () => {
@@ -13995,11 +14128,12 @@ function $21f51c14cb3f586f$export$84bba84a7b837187(read_search_query) {
 async function $bfd908d13d90934c$export$e16630ecb9644a1c({
   on_submit_with_unchanged_value_: on_submit_with_unchanged_value_,
   search_param_name_: search_param_name_,
-  set_search_field_value_: set_search_field_value_,
+  search_field_value_: search_field_value_,
   get_search_query_: get_search_query_,
   url_transformer_: url_transformer_,
   router_: router_,
   after_submit_: after_submit_,
+  before_navigate_: before_navigate_,
   get_new_query: get_new_query
 }) {
   const new_search_query = get_new_query();
@@ -14007,21 +14141,89 @@ async function $bfd908d13d90934c$export$e16630ecb9644a1c({
   if (previous_query === new_search_query && new URLSearchParams(location.search).has(search_param_name_)) {
     // don't push a history entry / re-search if someone submits a search again
     // do close the modal though
+    search_field_value_.settle_(new_search_query);
     on_submit_with_unchanged_value_?.();
-    return;
+    return false;
   }
-  set_search_field_value_(previous_query); // restore the value to the previous query since this one goes to the new history entry
   const target_url = new URL(location.href);
   url_transformer_?.(target_url);
   target_url.searchParams.set(search_param_name_, new_search_query);
-  await router_.navigate_.go_to_({
-    new_url_: target_url,
-    is_replace_: false,
-    force_spa_navigation_: true
-  });
-  set_search_field_value_(new_search_query);
+  const end_submit = search_field_value_.begin_submit_(new_search_query, previous_query);
+  before_navigate_?.();
+  let landed;
+  try {
+    await router_.navigate_.go_to_({
+      new_url_: target_url,
+      is_replace_: false,
+      force_spa_navigation_: true
+    });
+  } finally {
+    landed = end_submit();
+  }
+  if (!landed) return false;
   scrollTo(0, 0);
   after_submit_?.();
+  return true;
+}
+function $a578366fad1bde47$export$d13a185c53aa5edf(persisted_, get_search_query_) {
+  const [get_persisted, set_persisted] = persisted_;
+  const [get_submitting, set_submitting] = $9HbP8$createSignal();
+  const get_value = $9HbP8$createMemo(() => get_submitting() ?? get_persisted());
+  const set_value = value => {
+    const new_value = typeof value === "function" ? value($9HbP8$untrack(get_value)) : value;
+    if ($9HbP8$untrack(get_submitting) === undefined) set_persisted(new_value);else set_submitting(new_value);
+    return new_value;
+  };
+  let current_submit;
+  const end_submit = landed => {
+    current_submit.landed_ = landed;
+    current_submit = undefined;
+    $9HbP8$batch(() => {
+      const submitting = $9HbP8$untrack(get_submitting);
+      set_submitting(undefined);
+      if (landed && submitting !== undefined) set_persisted(submitting);
+    });
+  };
+  const abort_on_popstate = what_happened => {
+    if (what_happened === "popstate" && current_submit) end_submit(false);
+  };
+  (0, $9HbP8$instant_exec_on_suspect_history_change).add(abort_on_popstate);
+  $9HbP8$onCleanup(() => (0, $9HbP8$instant_exec_on_suspect_history_change).delete(abort_on_popstate));
+  $9HbP8$createEffect($9HbP8$on(get_search_query_, query => {
+    const token = current_submit;
+    if (!token || query !== token.query_) return;
+    queueMicrotask(() => {
+      if (current_submit === token) end_submit(true);
+    });
+  }, {
+    defer: true
+  }));
+  const begin_submit_ = (submitted_query, query_of_current_history_entry) => {
+    const token = current_submit = {
+      query_: submitted_query,
+      landed_: false
+    };
+    $9HbP8$batch(() => {
+      set_submitting(submitted_query);
+      set_persisted(query_of_current_history_entry);
+    });
+    return () => {
+      if (current_submit === token) end_submit(true);
+      return token.landed_;
+    };
+  };
+  const settle_ = query => {
+    if (current_submit) return;
+    $9HbP8$batch(() => {
+      set_submitting(undefined);
+      set_persisted(query);
+    });
+  };
+  return {
+    value_: [get_value, set_value],
+    begin_submit_: begin_submit_,
+    settle_: settle_
+  };
 }
 function $d68658730065de95$export$181cceed5c91919e(callback, alsoRaF, passiveListener) {
   let aligned_this_microtask = false;
@@ -14725,6 +14927,7 @@ function $7097477c78a89208$export$a54ec244c8863715({
   scroll_restoration_data_: scroll_restoration_data_,
   product_card_template_: product_card_template_,
   modalAlignmentSignalsRef_: modalAlignmentSignalsRef_,
+  inputFieldRef_: inputFieldRef_,
   router_: router_,
   content_results_rows_: content_results_rows_,
   content_layout_options_: content_layout_options_,
@@ -14913,6 +15116,8 @@ function $7097477c78a89208$export$a54ec244c8863715({
       if (!search_field) break add_input_field;
       setModalBodyStyle({});
       modalAlignmentSignalsRef_?.(alignmentSignals_);
+      inputFieldRef_?.(input_element);
+      $9HbP8$onCleanup(() => inputFieldRef_?.(undefined));
       const [pollAlignment, setPollAlignment_] = $9HbP8$createSignal(false);
       const align_position = $9HbP8$catchify1((0, $b6d5529b253681aa$export$b3ad617e9036868))(alignmentSignals_, search_field, (0, $b6d5529b253681aa$export$3f238c96c45e6cc6) | (0, $b6d5529b253681aa$export$7895aadd1956b1c7) | (modalVersionUsed_ === 1 ? (0, $b6d5529b253681aa$export$902f8b4a7dae5d78) : (0, $b6d5529b253681aa$export$6060bc6bee850eb6) | (0, $b6d5529b253681aa$export$5097308c5200105a)), true, pollAlignment);
       div_with_field_class.addEventListener("click", $9HbP8$catchify1(e => {
@@ -15255,14 +15460,16 @@ class $806c97b931758897$export$ac6237957a15b3f0 {
         set_search_content_results_rows((0, $49de9d31aeea1b5e$export$70ceae36059a1036));
       }; // do this every time after we have submitted a new query - otherwise there might already be a saved number of rows in the state
       const on_submit_with_unchanged_value_ = () => this.modal_open = false;
-      const [get_search_field_value_, set_search_field_value_] = state_.field_value;
-      const configured_submit_query_ = new_query => $bfd908d13d90934c$export$e16630ecb9644a1c({
+      const search_field_value_ = $a578366fad1bde47$export$d13a185c53aa5edf(state_.field_value, get_search_query_);
+      const [get_search_field_value_] = search_field_value_.value_;
+      const configured_submit_query_ = (new_query, before_navigate_) => $bfd908d13d90934c$export$e16630ecb9644a1c({
         on_submit_with_unchanged_value_: on_submit_with_unchanged_value_,
-        set_search_field_value_: set_search_field_value_,
+        search_field_value_: search_field_value_,
         get_search_query_: get_search_query_,
         search_param_name_: search_query_url_param_name_,
         after_submit_: after_submit_,
-        get_new_query: () => new_query || $9HbP8$untrack(get_search_field_value_),
+        before_navigate_: before_navigate_,
+        get_new_query: () => new_query ?? $9HbP8$untrack(get_search_field_value_),
         url_transformer_: url_transformer,
         router_: this.#router
       });
@@ -15281,6 +15488,7 @@ class $806c97b931758897$export$ac6237957a15b3f0 {
         search_query_url_param_name_: search_query_url_param_name_,
         reset_history_state_: reset_history_state_,
         state_: state_,
+        search_field_value_: search_field_value_.value_,
         router_: this.#router,
         url_transformer_: url_transformer,
         depict_api_: depict_api_,
@@ -15304,7 +15512,8 @@ class $806c97b931758897$export$ac6237957a15b3f0 {
           $9HbP8$onCleanup(() => this.modal_open = false);
           return searchModalComponent(...args);
         }, {
-          search_field_value_: state_.field_value,
+          search_field_value_: search_field_value_.value_,
+          get_search_page_input_element_: () => $806c97b931758897$export$dde08b2dca8cc1ce.get(this)?.search_page_input_element_,
           get_search_query_: get_search_query_,
           search_query_url_param_name_: search_query_url_param_name_,
           previous_searches_: previous_searches,
@@ -15452,6 +15661,7 @@ function $806c97b931758897$export$f2dc7e4e4aa11abb(props) {
     const {
       state_: state_
     } = shared_properties;
+    let registered_input_element;
     const grid_spacing_override = $9HbP8$createMemo(() => {
       const {
         grid_spacing: grid_spacing
@@ -15480,7 +15690,7 @@ function $806c97b931758897$export$f2dc7e4e4aa11abb(props) {
       min_products_to_fetch_: $806c97b931758897$var$min_products_to_fetch_,
       local_filter_cache_: state_.local_filter_cache,
       content_search_enabled_: () => depict_search.enable_content_search ?? $806c97b931758897$var$content_search_default,
-      search_field_value_: state_.field_value,
+      search_field_value_: shared_properties.search_field_value_,
       get_search_query_: shared_properties.get_search_query_,
       clear_filters_on_next_submit_: shared_properties.clear_filters_on_next_submit_,
       open_modal_: (...args) => depict_search.modal_open = args,
@@ -15488,6 +15698,16 @@ function $806c97b931758897$export$f2dc7e4e4aa11abb(props) {
       modalVersionUsed_: shared_properties.modalVersionUsed_,
       showSliderArrow_: () => props.showSliderArrow_,
       i18n_: shared_properties.i18n_,
+      inputFieldRef_: input_element => {
+        const shared_info_right_now = $806c97b931758897$export$dde08b2dca8cc1ce.get(depict_search);
+        if (!shared_info_right_now) return;
+        if (input_element === undefined && shared_info_right_now.search_page_input_element_ !== registered_input_element) return;
+        registered_input_element = input_element;
+        $806c97b931758897$export$dde08b2dca8cc1ce.set(depict_search, {
+          ...shared_info_right_now,
+          search_page_input_element_: input_element
+        });
+      },
       modalAlignmentSignalsRef_: style => {
         const shared_info_right_now = $806c97b931758897$export$dde08b2dca8cc1ce.get(depict_search);
         if (!shared_info_right_now) return;
@@ -15838,7 +16058,7 @@ function $58b3487626e85ece$export$316f6f283ae64765(props) {
         return shared_properties.BackIcon_;
       },
       get search_field_value_() {
-        return shared_properties.state_.field_value;
+        return shared_properties.search_field_value_;
       },
       get submit_query_() {
         return shared_properties.configured_submit_query_;
@@ -15881,7 +16101,7 @@ function $58b3487626e85ece$export$316f6f283ae64765(props) {
                   return shared_properties.BackIcon_;
                 },
                 get search_field_value_() {
-                  return shared_properties.state_.field_value;
+                  return shared_properties.search_field_value_;
                 },
                 get submit_query_() {
                   return shared_properties.configured_submit_query_;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depict-ai/ui",
-  "version": "4.10.19",
+  "version": "4.10.21",
   "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",
   "sass": "styles.scss",
@@ -236,9 +236,9 @@
     "@babel/plugin-transform-typescript": "^7.22.9",
     "@babel/runtime": "^7.22.6",
     "@babel/runtime-corejs3": "^7.22.6",
-    "@depict-ai/plp-styling": "^4.6.11",
-    "@depict-ai/types": "^5.6.9",
-    "@depict-ai/utilishared": "^2.6.9",
+    "@depict-ai/plp-styling": "^4.6.13",
+    "@depict-ai/types": "^5.6.11",
+    "@depict-ai/utilishared": "^2.6.11",
     "solid-js": "^1.9.10"
   },
   "type": "module",