@depict-ai/ui 4.10.18 → 4.10.20

package/latest/index.cjs

@@ -109,7 +109,7 @@ $parcel$export(module.exports, "BreadCrumbs", () => $1f4925833f07df29$export$5b7
 $parcel$export(module.exports, "QuickLinks", () => $1f4925833f07df29$export$de035477d6fef996);
 $parcel$export(module.exports, "CategoryPage", () => $14f289047713d67a$export$e2bf8ce7779e827e);
 /*! Depict.ai search and product listing SDK */
-const $b757f75811f3261f$export$83d89fbfd8236492 = "4.10.18";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "4.10.20";
 function $b54e6192d0caa293$export$d9f36cf74e24d595(media_query) {
   const signal = $gVhhF$solidjs.createSignal(false);
   $gVhhF$solidjs.onCleanup($gVhhF$depictaiutilishared.javascript_media_query(media_query, ({
@@ -2593,6 +2593,7 @@ async function $9abb0a35d4b60ed3$export$79b1565500412d9b(search_modal, modal_fn_
     const modal_els = $gVhhF$solidjs.createRoot(dispose => {
       let closing_animation;
       let animation_started;
+      let focus_target_after_close;
       dispose_and_remove = () => {
         const actually_close = () => {
           dispose();
@@ -2611,11 +2612,19 @@ async function $9abb0a35d4b60ed3$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({
+              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) element_focused_before_open.focus({
                 preventScroll: true
               });
             } finally {
@@ -2636,7 +2645,8 @@ async function $9abb0a35d4b60ed3$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);
@@ -7816,7 +7826,8 @@ async function $20ff40266d725403$export$5d2f6cd705125cd3() {
   return hlsModule;
 }
 var $32c662f618f5d80d$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<video class=d-standard-content>`),
-  $32c662f618f5d80d$var$_tmpl$2 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<span class=d-standard-content-text>`);
+  $32c662f618f5d80d$var$_tmpl$2 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=d-standard-content-text-group><span class=d-standard-content-text></span><span class=d-standard-content-cta>`),
+  $32c662f618f5d80d$var$_tmpl$3 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<span class=d-standard-content-text>`);
 function $32c662f618f5d80d$export$780a853d15174484({
   link_: link_,
   type_: type_,
@@ -7826,7 +7837,8 @@ function $32c662f618f5d80d$export$780a853d15174484({
   aspectRatioWhenAloneInRow_: aspectRatioWhenAloneInRow_,
   imageResizer_: imageResizer_,
   text_: text_,
-  textPosition_: textPosition_
+  textPosition_: textPosition_,
+  cta_: cta_
 }) {
   let wroteAspectRatioToContainer = false; // Only write this once so we don't get into a aspect ratio changed -> size changed -> image source changed -> aspect ratio slightly changed infinite loop
   const [wrapperSize, setWrapperSize] = $gVhhF$solidjs.createSignal();
@@ -7927,15 +7939,44 @@ function $32c662f618f5d80d$export$780a853d15174484({
       }), $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
         when: text_,
         get children() {
-          var _el$2 = $gVhhF$solidjsweb.getNextElement($32c662f618f5d80d$var$_tmpl$2);
-          $gVhhF$solidjsweb.setAttribute(_el$2, "data-position", textPosition_ || "bottom-center");
-          $gVhhF$solidjsweb.insert(_el$2, text_);
-          return _el$2;
+          return $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
+            when: cta_,
+            get fallback() {
+              return (() => {
+                var _el$5 = $gVhhF$solidjsweb.getNextElement($32c662f618f5d80d$var$_tmpl$3);
+                $gVhhF$solidjsweb.setAttribute(_el$5, "data-position", textPosition_ || "bottom-center");
+                $gVhhF$solidjsweb.insert(_el$5, text_);
+                return _el$5;
+              })();
+            },
+            get children() {
+              var _el$2 = $gVhhF$solidjsweb.getNextElement($32c662f618f5d80d$var$_tmpl$2),
+                _el$3 = _el$2.firstChild,
+                _el$4 = _el$3.nextSibling;
+              $gVhhF$solidjsweb.setAttribute(_el$2, "data-position", textPosition_ || "bottom-center");
+              $gVhhF$solidjsweb.setAttribute(_el$3, "data-position", textPosition_ || "bottom-center");
+              $gVhhF$solidjsweb.insert(_el$3, text_);
+              $gVhhF$solidjsweb.setAttribute(_el$4, "data-position", textPosition_ || "bottom-center");
+              $gVhhF$solidjsweb.insert(_el$4, cta_);
+              return _el$2;
+            }
+          });
         }
       })];
     }
   }));
 }
+const $0a80939bf0a1e9cc$export$af2c67164f68e9e9 = content => {
+  const {
+    link: link,
+    type: type,
+    url: url,
+    text: text,
+    text_position: text_position,
+    cta: cta
+  } = content;
+  return JSON.stringify([link, type, url, text ?? null, text_position ?? null, cta ?? null]);
+};
 function $0a80939bf0a1e9cc$export$7a92d995f1bf3592(history_content_blocks_, plp_meta, content_blocks_by_row_, router_, products_request_loading_, imageResizer_) {
   let hasSeenContentBlock = false;
   const [historyContentBlocks, setHistoryContentBlocks] = history_content_blocks_;
@@ -7972,13 +8013,11 @@ function $0a80939bf0a1e9cc$export$7a92d995f1bf3592(history_content_blocks_, plp_
           type: type,
           url: url,
           text: text,
-          text_position: text_position
+          text_position: text_position,
+          cta: cta
         }
       } = row;
-      // Key the "content"-component by its rendered inputs, so we can reuse the component (and later downstream the block elements) if it's the same
-      // This makes the block not flicker when going backwards/forwards if the content is the same on both pages
-      // Also it lets us rewrite the blocks state in the history based on the block aspect ratio without infinite looping
-      const componentCacheKey = JSON.stringify([link, type, url, text ?? null, text_position ?? null]);
+      const componentCacheKey = $0a80939bf0a1e9cc$export$af2c67164f68e9e9(row.content);
       // The aspect ratio depends only on the media, so its history key must stay the pre-text 3-element shape — widening it would orphan every ratio already persisted in history.state
       const mediaCacheKey = JSON.stringify([link, type, url]);
       let component = contentComponents.get(componentCacheKey);
@@ -7998,7 +8037,8 @@ function $0a80939bf0a1e9cc$export$7a92d995f1bf3592(history_content_blocks_, plp_
           })),
           imageResizer_: imageResizer_,
           text_: text,
-          textPosition_: text_position
+          textPosition_: text_position,
+          cta_: cta
         });
         contentComponents.set(componentCacheKey, component);
       }
@@ -10778,6 +10818,7 @@ var $66b8b9a9613c141d$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<but
   $66b8b9a9613c141d$var$_tmpl$3 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=spacer>`),
   $66b8b9a9613c141d$var$_tmpl$4 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<button class="submit major"type=button>`),
   $66b8b9a9613c141d$var$_tmpl$5 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div><!$><!/><!$><!/><div class=field><!$><!/><input class=query tabindex=0 enterkeyhint=search><!$><!/></div><!$><!/><!$><!/>`);
+const $66b8b9a9613c141d$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 $66b8b9a9613c141d$export$b94867ecbd698f21({
   search_field_value_: [searchFieldValue, setSearchFieldValue],
   input_field_ref_: input_field_ref_,
@@ -10955,7 +10996,7 @@ function $66b8b9a9613c141d$export$b94867ecbd698f21({
       get onKeyDown() {
         return $gVhhF$depictaiutilishared.catchify(e => {
           if (disabled_) {
-            if (e.key !== "Tab" && e.key !== "Shift")
+            if (!$66b8b9a9613c141d$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") {
@@ -11058,6 +11099,31 @@ function $eb3039a27db40508$export$93d9bfd0c9c1a5b8(close_modal, search_query_url
     }
   })();
 }
+function $5f9dc76a99175920$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_ ? $gVhhF$solidjs.createSignal("") : props_search_field_value_;
+  let submits_in_flight = 0;
+  const submit_query_ = async (new_query = $gVhhF$solidjs.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_) $gVhhF$solidjs.createEffect($gVhhF$solidjs.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 $44f0b2e312a9b710$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=discover-more><button class=major type=button>`),
   $44f0b2e312a9b710$var$_tmpl$2 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<b>`),
   $44f0b2e312a9b710$var$_tmpl$3 = /*#__PURE__*/$gVhhF$solidjsweb.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><!$><!/>`),
@@ -11071,6 +11137,8 @@ function $44f0b2e312a9b710$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_,
@@ -11095,15 +11163,16 @@ function $44f0b2e312a9b710$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_ ? $gVhhF$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]($gVhhF$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 {
+    search_field_value_: search_field_value_,
+    submit_query_: submit_query_
+  } = $5f9dc76a99175920$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] = $gVhhF$solidjs.createSignal();
   const [get_search_field_value_] = search_field_value_;
   // Search field alignment unused in ClassicSearchModal since the search field spans the whole modal
@@ -11898,6 +11967,8 @@ function $11597ae03e703a47$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_,
@@ -11928,15 +11999,16 @@ function $11597ae03e703a47$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_ ? $gVhhF$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]($gVhhF$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 {
+    search_field_value_: search_field_value_,
+    submit_query_: submit_query_
+  } = $5f9dc76a99175920$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] = $gVhhF$solidjs.createSignal();
   const [searching_for_value_, set_searching_for_value_] = $gVhhF$solidjs.createSignal();
   const [show_stale_content_results_, set_show_stale_content_results_] = $gVhhF$solidjs.createSignal(false);
@@ -14067,11 +14139,12 @@ function $2b7a005a65221045$export$84bba84a7b837187(read_search_query) {
 async function $f328bd45f8ede33c$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();
@@ -14079,21 +14152,89 @@ async function $f328bd45f8ede33c$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 $380b434363eee5f6$export$d13a185c53aa5edf(persisted_, get_search_query_) {
+  const [get_persisted, set_persisted] = persisted_;
+  const [get_submitting, set_submitting] = $gVhhF$solidjs.createSignal();
+  const get_value = $gVhhF$solidjs.createMemo(() => get_submitting() ?? get_persisted());
+  const set_value = value => {
+    const new_value = typeof value === "function" ? value($gVhhF$solidjs.untrack(get_value)) : value;
+    if ($gVhhF$solidjs.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;
+    $gVhhF$solidjs.batch(() => {
+      const submitting = $gVhhF$solidjs.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, $gVhhF$depictaiutilishared.instant_exec_on_suspect_history_change).add(abort_on_popstate);
+  $gVhhF$solidjs.onCleanup(() => (0, $gVhhF$depictaiutilishared.instant_exec_on_suspect_history_change).delete(abort_on_popstate));
+  $gVhhF$solidjs.createEffect($gVhhF$solidjs.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
+    };
+    $gVhhF$solidjs.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;
+    $gVhhF$solidjs.batch(() => {
+      set_submitting(undefined);
+      set_persisted(query);
+    });
+  };
+  return {
+    value_: [get_value, set_value],
+    begin_submit_: begin_submit_,
+    settle_: settle_
+  };
 }
 function $331c7a65de274e6c$export$181cceed5c91919e(callback, alsoRaF, passiveListener) {
   let aligned_this_microtask = false;
@@ -14797,6 +14938,7 @@ function $f1d7cb69f839a526$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_,
@@ -14985,6 +15127,8 @@ function $f1d7cb69f839a526$export$a54ec244c8863715({
       if (!search_field) break add_input_field;
       setModalBodyStyle({});
       modalAlignmentSignalsRef_?.(alignmentSignals_);
+      inputFieldRef_?.(input_element);
+      $gVhhF$solidjs.onCleanup(() => inputFieldRef_?.(undefined));
       const [pollAlignment, setPollAlignment_] = $gVhhF$solidjs.createSignal(false);
       const align_position = $gVhhF$depictaiutilishared.catchify((0, $fd463ff0edb29915$export$b3ad617e9036868))(alignmentSignals_, search_field, (0, $fd463ff0edb29915$export$3f238c96c45e6cc6) | (0, $fd463ff0edb29915$export$7895aadd1956b1c7) | (modalVersionUsed_ === 1 ? (0, $fd463ff0edb29915$export$902f8b4a7dae5d78) : (0, $fd463ff0edb29915$export$6060bc6bee850eb6) | (0, $fd463ff0edb29915$export$5097308c5200105a)), true, pollAlignment);
       div_with_field_class.addEventListener("click", $gVhhF$depictaiutilishared.catchify(e => {
@@ -15327,14 +15471,16 @@ class $2c61e4cd8229c49a$export$ac6237957a15b3f0 {
         set_search_content_results_rows((0, $3716b8caf7f959e2$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 => $f328bd45f8ede33c$export$e16630ecb9644a1c({
+      const search_field_value_ = $380b434363eee5f6$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_) => $f328bd45f8ede33c$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 || $gVhhF$solidjs.untrack(get_search_field_value_),
+        before_navigate_: before_navigate_,
+        get_new_query: () => new_query ?? $gVhhF$solidjs.untrack(get_search_field_value_),
         url_transformer_: url_transformer,
         router_: this.#router
       });
@@ -15353,6 +15499,7 @@ class $2c61e4cd8229c49a$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_,
@@ -15376,7 +15523,8 @@ class $2c61e4cd8229c49a$export$ac6237957a15b3f0 {
           $gVhhF$solidjs.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_: () => $2c61e4cd8229c49a$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,
@@ -15524,6 +15672,7 @@ function $2c61e4cd8229c49a$export$f2dc7e4e4aa11abb(props) {
     const {
       state_: state_
     } = shared_properties;
+    let registered_input_element;
     const grid_spacing_override = $gVhhF$solidjs.createMemo(() => {
       const {
         grid_spacing: grid_spacing
@@ -15552,7 +15701,7 @@ function $2c61e4cd8229c49a$export$f2dc7e4e4aa11abb(props) {
       min_products_to_fetch_: $2c61e4cd8229c49a$var$min_products_to_fetch_,
       local_filter_cache_: state_.local_filter_cache,
       content_search_enabled_: () => depict_search.enable_content_search ?? $2c61e4cd8229c49a$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,
@@ -15560,6 +15709,16 @@ function $2c61e4cd8229c49a$export$f2dc7e4e4aa11abb(props) {
       modalVersionUsed_: shared_properties.modalVersionUsed_,
       showSliderArrow_: () => props.showSliderArrow_,
       i18n_: shared_properties.i18n_,
+      inputFieldRef_: input_element => {
+        const shared_info_right_now = $2c61e4cd8229c49a$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;
+        $2c61e4cd8229c49a$export$dde08b2dca8cc1ce.set(depict_search, {
+          ...shared_info_right_now,
+          search_page_input_element_: input_element
+        });
+      },
       modalAlignmentSignalsRef_: style => {
         const shared_info_right_now = $2c61e4cd8229c49a$export$dde08b2dca8cc1ce.get(depict_search);
         if (!shared_info_right_now) return;
@@ -15910,7 +16069,7 @@ function $c0a0659cf97e8eb2$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_;
@@ -15953,7 +16112,7 @@ function $c0a0659cf97e8eb2$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/latest/index.d.ts

@@ -11,7 +11,7 @@ import { GetListingRequest } from "@depict-ai/types/api/GetListingRequest";
 import { BaseSearchRequestV3 } from "@depict-ai/types/api/BaseSearchRequestV3";
 import { FeaturedInDisplay } from "@depict-ai/types/api/FeaturedInResponseV3";
 import { SearchFilter as _SearchFilter3 } from "@depict-ai/types/api/SearchRequestV2";
-export const version = "4.10.18";
+export const version = "4.10.20";
 /**
  * Use `javascript_media_query` but return a reactive accessor instead of taking a callback function
  */
@@ -713,6 +713,8 @@ declare function RawSearchModalV2<InputDisplay extends Display, OutputDisplay ex
   search_query_url_param_name_,
   previous_searches_,
   close_modal_,
+  set_focus_target_after_close_,
+  get_search_page_input_element_,
   alignmentSignals_,
   depict_api_,
   merchant_,
@@ -743,12 +745,14 @@ declare function RawSearchModalV2<InputDisplay extends Display, OutputDisplay ex
   search_query_url_param_name_: string;
   previous_searches_: Signal<string[]>;
   close_modal_: VoidFunction;
+  set_focus_target_after_close_: (get_target: (() => HTMLElement | undefined) | undefined) => void;
+  get_search_page_input_element_: () => HTMLInputElement | undefined;
   alignmentSignals_?: ModalAlignmentSignals;
   depict_api_: DepictAPI<InputDisplay, OutputDisplay>;
   clear_filters_: (user_triggered: boolean) => void;
   merchant_: Accessor<string>;
   market_: Accessor<string>;
-  submit_query_: (new_query?: string) => void;
+  submit_query_: (new_query?: string, before_navigate_?: VoidFunction) => Promise<boolean>;
   class_list_?: Accessor<Record<string, boolean>>;
   url_transformer_?: (url_object: URL) => unknown;
   disable_scrolling_?: boolean;
@@ -785,6 +789,8 @@ declare function RawClassicSearchModal({
   search_query_url_param_name_,
   previous_searches_,
   close_modal_,
+  set_focus_target_after_close_,
+  get_search_page_input_element_,
   depict_api_,
   merchant_,
   market_,
@@ -810,11 +816,13 @@ declare function RawClassicSearchModal({
   search_query_url_param_name_: string;
   previous_searches_: Signal<string[]>;
   close_modal_: VoidFunction;
+  set_focus_target_after_close_: (get_target: (() => HTMLElement | undefined) | undefined) => void;
+  get_search_page_input_element_: () => HTMLInputElement | undefined;
   depict_api_: DepictAPI<any>;
   clear_filters_: (user_triggered: boolean) => void;
   merchant_: Accessor<string>;
   market_: Accessor<string>;
-  submit_query_: (new_query?: string) => void;
+  submit_query_: (new_query?: string, before_navigate_?: VoidFunction) => Promise<boolean>;
   class_list_?: Accessor<Record<string, boolean>>;
   url_transformer_?: (url_object: URL) => unknown;
   disable_scrolling_?: boolean;
@@ -1038,6 +1046,7 @@ export function general_modal_abstraction<StaticOptions extends {
   close_modal_: VoidFunction;
   open_modal_: (extra_options_for_modal?: ExtraOptionsProvidedOnOpen, on_dispose?: VoidFunction) => void;
   register_closing_animation_: (animation: () => Promise<any>) => void;
+  set_focus_target_after_close_: (get_target: (() => HTMLElement | undefined) | undefined) => void;
 }) => Node_Array, modal_fn_opts: StaticOptions, parent?: HTMLElement | ShadowRoot): Promise<{
   open_modal_: (extra_options_for_modal?: any, on_dispose?: VoidFunction | undefined) => Promise<void | undefined>;
   close_modal_: () => void | undefined;