@depict-ai/ui 4.10.18 → 4.10.20

package/ES10/index.cjs

@@ -115,7 +115,7 @@ $parcel$export(module.exports, "BreadCrumbs", () => $335c02c1241a9ca8$export$5b7
 $parcel$export(module.exports, "QuickLinks", () => $335c02c1241a9ca8$export$de035477d6fef996);
 $parcel$export(module.exports, "CategoryPage", () => $c10e33c4681f8c9b$export$e2bf8ce7779e827e);
 /*! Depict.ai search and product listing SDK */
-const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.10.18";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.10.20";
 function $3e17e871e9d0911d$export$d9f36cf74e24d595(media_query) {
   const signal = $52FdA$solidjs.createSignal(false);
   $52FdA$solidjs.onCleanup($52FdA$depictaiutilishared.javascript_media_query(media_query, _ref => {
@@ -2709,8 +2709,10 @@ async function $4cf7d9829d60d844$export$79b1565500412d9b(search_modal, modal_fn_
     const modal_els = $52FdA$solidjs.createRoot(dispose => {
       let closing_animation;
       let animation_started;
+      let focus_target_after_close;
       dispose_and_remove = () => {
         const actually_close = () => {
+          var _focus_target_after_c;
           dispose();
           on_dispose === null || on_dispose === void 0 || on_dispose();
           const {
@@ -2729,11 +2731,19 @@ async function $4cf7d9829d60d844$export$79b1565500412d9b(search_modal, modal_fn_
             }
             el.remove();
           });
-          if (should_restore_focus && element_focused_before_open !== null && element_focused_before_open !== void 0 && element_focused_before_open.isConnected) {
+          const requested_focus_target = (_focus_target_after_c = focus_target_after_close) === null || _focus_target_after_c === void 0 ? void 0 : _focus_target_after_c();
+          if (should_restore_focus && (requested_focus_target !== null && requested_focus_target !== void 0 && requested_focus_target.isConnected || element_focused_before_open !== null && element_focused_before_open !== void 0 && 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 !== null && requested_focus_target !== void 0 && 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 !== null && element_focused_before_open !== void 0 && element_focused_before_open.isConnected) element_focused_before_open.focus({
                 preventScroll: true
               });
             } finally {
@@ -2755,7 +2765,8 @@ async function $4cf7d9829d60d844$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);
@@ -8253,7 +8264,8 @@ async function $8e8c89c02c16dc7b$export$5d2f6cd705125cd3() {
   return hlsModule;
 }
 var $c19709057a32b2e7$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<video class=d-standard-content>`),
-  $c19709057a32b2e7$var$_tmpl$2 = /*#__PURE__*/$52FdA$solidjsweb.template(`<span class=d-standard-content-text>`);
+  $c19709057a32b2e7$var$_tmpl$2 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=d-standard-content-text-group><span class=d-standard-content-text></span><span class=d-standard-content-cta>`),
+  $c19709057a32b2e7$var$_tmpl$3 = /*#__PURE__*/$52FdA$solidjsweb.template(`<span class=d-standard-content-text>`);
 function $c19709057a32b2e7$export$780a853d15174484(_ref) {
   let {
     link_: link_,
@@ -8264,7 +8276,8 @@ function $c19709057a32b2e7$export$780a853d15174484(_ref) {
     aspectRatioWhenAloneInRow_: aspectRatioWhenAloneInRow_,
     imageResizer_: imageResizer_,
     text_: text_,
-    textPosition_: textPosition_
+    textPosition_: textPosition_,
+    cta_: cta_
   } = _ref;
   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] = $52FdA$solidjs.createSignal();
@@ -8371,15 +8384,44 @@ function $c19709057a32b2e7$export$780a853d15174484(_ref) {
       }), $52FdA$solidjsweb.createComponent((0, $52FdA$solidjs.Show), {
         when: text_,
         get children() {
-          var _el$2 = $52FdA$solidjsweb.getNextElement($c19709057a32b2e7$var$_tmpl$2);
-          $52FdA$solidjsweb.setAttribute(_el$2, "data-position", textPosition_ || "bottom-center");
-          $52FdA$solidjsweb.insert(_el$2, text_);
-          return _el$2;
+          return $52FdA$solidjsweb.createComponent((0, $52FdA$solidjs.Show), {
+            when: cta_,
+            get fallback() {
+              return (() => {
+                var _el$5 = $52FdA$solidjsweb.getNextElement($c19709057a32b2e7$var$_tmpl$3);
+                $52FdA$solidjsweb.setAttribute(_el$5, "data-position", textPosition_ || "bottom-center");
+                $52FdA$solidjsweb.insert(_el$5, text_);
+                return _el$5;
+              })();
+            },
+            get children() {
+              var _el$2 = $52FdA$solidjsweb.getNextElement($c19709057a32b2e7$var$_tmpl$2),
+                _el$3 = _el$2.firstChild,
+                _el$4 = _el$3.nextSibling;
+              $52FdA$solidjsweb.setAttribute(_el$2, "data-position", textPosition_ || "bottom-center");
+              $52FdA$solidjsweb.setAttribute(_el$3, "data-position", textPosition_ || "bottom-center");
+              $52FdA$solidjsweb.insert(_el$3, text_);
+              $52FdA$solidjsweb.setAttribute(_el$4, "data-position", textPosition_ || "bottom-center");
+              $52FdA$solidjsweb.insert(_el$4, cta_);
+              return _el$2;
+            }
+          });
         }
       })];
     }
   }));
 }
+const $0c035bbe7e30b438$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 !== void 0 ? text : null, text_position !== null && text_position !== void 0 ? text_position : null, cta !== null && cta !== void 0 ? cta : null]);
+};
 function $0c035bbe7e30b438$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_;
@@ -8417,13 +8459,11 @@ function $0c035bbe7e30b438$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 !== void 0 ? text : null, text_position !== null && text_position !== void 0 ? text_position : null]);
+      const componentCacheKey = $0c035bbe7e30b438$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);
@@ -8443,7 +8483,8 @@ function $0c035bbe7e30b438$export$7a92d995f1bf3592(history_content_blocks_, plp_
           })),
           imageResizer_: imageResizer_,
           text_: text,
-          textPosition_: text_position
+          textPosition_: text_position,
+          cta_: cta
         });
         contentComponents.set(componentCacheKey, component);
       }
@@ -11392,6 +11433,7 @@ var $29e5dbeb69da7a36$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<but
   $29e5dbeb69da7a36$var$_tmpl$3 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=spacer>`),
   $29e5dbeb69da7a36$var$_tmpl$4 = /*#__PURE__*/$52FdA$solidjsweb.template(`<button class="submit major"type=button>`),
   $29e5dbeb69da7a36$var$_tmpl$5 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div><!$><!/><!$><!/><div class=field><!$><!/><input class=query tabindex=0 enterkeyhint=search><!$><!/></div><!$><!/><!$><!/>`);
+const $29e5dbeb69da7a36$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 $29e5dbeb69da7a36$export$b94867ecbd698f21(_ref) {
   let {
     search_field_value_: [searchFieldValue, setSearchFieldValue],
@@ -11574,7 +11616,7 @@ function $29e5dbeb69da7a36$export$b94867ecbd698f21(_ref) {
       get onKeyDown() {
         return $52FdA$depictaiutilishared.catchify(e => {
           if (disabled_) {
-            if (e.key !== "Tab" && e.key !== "Shift")
+            if (!$29e5dbeb69da7a36$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") {
@@ -11679,6 +11721,33 @@ function $4b71b4fabdee5753$export$93d9bfd0c9c1a5b8(close_modal, search_query_url
     }
   })();
 }
+function $9ccac7b807fe6451$export$9e9e2ae069cf2fe1(_ref) {
+  let {
+    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_
+  } = _ref;
+  const search_field_value_ = dont_sync_search_field_value_except_on_submit_ ? $52FdA$solidjs.createSignal("") : props_search_field_value_;
+  let submits_in_flight = 0;
+  const submit_query_ = async function () {
+    let new_query = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : $52FdA$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_) $52FdA$solidjs.createEffect($52FdA$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 $9035b24c2dbd3f36$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=discover-more><button class=major type=button>`),
   $9035b24c2dbd3f36$var$_tmpl$2 = /*#__PURE__*/$52FdA$solidjsweb.template(`<b>`),
   $9035b24c2dbd3f36$var$_tmpl$3 = /*#__PURE__*/$52FdA$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><!$><!/>`),
@@ -11693,6 +11762,8 @@ function $9035b24c2dbd3f36$var$RawClassicSearchModal(_ref) {
     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_,
@@ -11717,15 +11788,16 @@ function $9035b24c2dbd3f36$var$RawClassicSearchModal(_ref) {
   // 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_ ? $52FdA$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]($52FdA$solidjs.untrack(search_field_value_[0])) // Set actual search field value to the throwaway internal one before submitting
-  : undefined;
-  const submit_query_ = function () {
-    // 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 === null || propagate_search_field_value_back === void 0 || propagate_search_field_value_back();
-    return props_submit_query(...arguments);
-  };
+  const {
+    search_field_value_: search_field_value_,
+    submit_query_: submit_query_
+  } = $9ccac7b807fe6451$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] = $52FdA$solidjs.createSignal();
   const [get_search_field_value_] = search_field_value_;
   // Search field alignment unused in ClassicSearchModal since the search field spans the whole modal
@@ -12557,6 +12629,8 @@ function $43600b30502feeda$var$RawSearchModalV2(_ref) {
     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_,
@@ -12587,15 +12661,16 @@ function $43600b30502feeda$var$RawSearchModalV2(_ref) {
   // 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_ ? $52FdA$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]($52FdA$solidjs.untrack(search_field_value_[0])) // Set actual search field value to the throwaway internal one before submitting
-  : undefined;
-  const submit_query_ = function () {
-    // 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 === null || propagate_search_field_value_back === void 0 || propagate_search_field_value_back();
-    return props_submit_query(...arguments);
-  };
+  const {
+    search_field_value_: search_field_value_,
+    submit_query_: submit_query_
+  } = $9ccac7b807fe6451$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] = $52FdA$solidjs.createSignal();
   const [searching_for_value_, set_searching_for_value_] = $52FdA$solidjs.createSignal();
   const [show_stale_content_results_, set_show_stale_content_results_] = $52FdA$solidjs.createSignal(false);
@@ -14913,11 +14988,12 @@ async function $7f680455a2aa1079$export$e16630ecb9644a1c(_ref) {
   let {
     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
   } = _ref;
   const new_search_query = get_new_query();
@@ -14925,21 +15001,92 @@ async function $7f680455a2aa1079$export$e16630ecb9644a1c(_ref) {
   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_ === null || on_submit_with_unchanged_value_ === void 0 || 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_ === null || url_transformer_ === void 0 || 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_ === null || before_navigate_ === void 0 || 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_ === null || after_submit_ === void 0 || after_submit_();
+  return true;
+}
+function $24f1a81b790e371c$export$d13a185c53aa5edf(persisted_, get_search_query_) {
+  const [get_persisted, set_persisted] = persisted_;
+  const [get_submitting, set_submitting] = $52FdA$solidjs.createSignal();
+  const get_value = $52FdA$solidjs.createMemo(() => {
+    var _get_submitting;
+    return (_get_submitting = get_submitting()) !== null && _get_submitting !== void 0 ? _get_submitting : get_persisted();
+  });
+  const set_value = value => {
+    const new_value = typeof value === "function" ? value($52FdA$solidjs.untrack(get_value)) : value;
+    if ($52FdA$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;
+    $52FdA$solidjs.batch(() => {
+      const submitting = $52FdA$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, $52FdA$depictaiutilishared.instant_exec_on_suspect_history_change).add(abort_on_popstate);
+  $52FdA$solidjs.onCleanup(() => (0, $52FdA$depictaiutilishared.instant_exec_on_suspect_history_change).delete(abort_on_popstate));
+  $52FdA$solidjs.createEffect($52FdA$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
+    };
+    $52FdA$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;
+    $52FdA$solidjs.batch(() => {
+      set_submitting(undefined);
+      set_persisted(query);
+    });
+  };
+  return {
+    value_: [get_value, set_value],
+    begin_submit_: begin_submit_,
+    settle_: settle_
+  };
 }
 function $7a8e55af4ef13fae$export$181cceed5c91919e(callback, alsoRaF, passiveListener) {
   let aligned_this_microtask = false;
@@ -15683,6 +15830,7 @@ function $739c927cbecd26b0$export$a54ec244c8863715(_ref) {
     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_,
@@ -15887,6 +16035,8 @@ function $739c927cbecd26b0$export$a54ec244c8863715(_ref) {
       if (!search_field) break add_input_field;
       setModalBodyStyle({});
       modalAlignmentSignalsRef_ === null || modalAlignmentSignalsRef_ === void 0 || modalAlignmentSignalsRef_(alignmentSignals_);
+      inputFieldRef_ === null || inputFieldRef_ === void 0 || inputFieldRef_(input_element);
+      $52FdA$solidjs.onCleanup(() => inputFieldRef_ === null || inputFieldRef_ === void 0 ? void 0 : inputFieldRef_(undefined));
       const [pollAlignment, setPollAlignment_] = $52FdA$solidjs.createSignal(false);
       const align_position = $52FdA$depictaiutilishared.catchify((0, $d6ed4dbb6507996d$export$b3ad617e9036868))(alignmentSignals_, search_field, (0, $d6ed4dbb6507996d$export$3f238c96c45e6cc6) | (0, $d6ed4dbb6507996d$export$7895aadd1956b1c7) | (modalVersionUsed_ === 1 ? (0, $d6ed4dbb6507996d$export$902f8b4a7dae5d78) : (0, $d6ed4dbb6507996d$export$6060bc6bee850eb6) | (0, $d6ed4dbb6507996d$export$5097308c5200105a)), true, pollAlignment);
       div_with_field_class.addEventListener("click", $52FdA$depictaiutilishared.catchify(e => {
@@ -16296,14 +16446,16 @@ class $ddd39c5f36f49703$export$ac6237957a15b3f0 {
         set_search_content_results_rows((0, $eab939d0b95b75ee$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 => $7f680455a2aa1079$export$e16630ecb9644a1c({
+      const search_field_value_ = $24f1a81b790e371c$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_) => $7f680455a2aa1079$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 || $52FdA$solidjs.untrack(get_search_field_value_),
+        before_navigate_: before_navigate_,
+        get_new_query: () => new_query !== null && new_query !== void 0 ? new_query : $52FdA$solidjs.untrack(get_search_field_value_),
         url_transformer_: url_transformer,
         router_: $parcel$interopDefault($52FdA$babelruntimehelpersclassPrivateFieldGet)(this, $ddd39c5f36f49703$var$_router)
       });
@@ -16322,6 +16474,7 @@ class $ddd39c5f36f49703$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_: $parcel$interopDefault($52FdA$babelruntimehelpersclassPrivateFieldGet)(this, $ddd39c5f36f49703$var$_router),
         url_transformer_: url_transformer,
         depict_api_: depict_api_,
@@ -16345,7 +16498,11 @@ class $ddd39c5f36f49703$export$ac6237957a15b3f0 {
           $52FdA$solidjs.onCleanup(() => _this.modal_open = false);
           return searchModalComponent(...arguments);
         }, {
-          search_field_value_: state_.field_value,
+          search_field_value_: search_field_value_.value_,
+          get_search_page_input_element_: () => {
+            var _privately_shared_pro2;
+            return (_privately_shared_pro2 = $ddd39c5f36f49703$export$dde08b2dca8cc1ce.get(this)) === null || _privately_shared_pro2 === void 0 ? void 0 : _privately_shared_pro2.search_page_input_element_;
+          },
           get_search_query_: get_search_query_,
           search_query_url_param_name_: search_query_url_param_name_,
           previous_searches_: previous_searches,
@@ -16510,6 +16667,7 @@ function $ddd39c5f36f49703$export$f2dc7e4e4aa11abb(props) {
     const {
       state_: state_
     } = shared_properties;
+    let registered_input_element;
     const grid_spacing_override = $52FdA$solidjs.createMemo(() => {
       const {
         grid_spacing: grid_spacing
@@ -16541,7 +16699,7 @@ function $ddd39c5f36f49703$export$f2dc7e4e4aa11abb(props) {
         var _depict_search$enable;
         return (_depict_search$enable = depict_search.enable_content_search) !== null && _depict_search$enable !== void 0 ? _depict_search$enable : $ddd39c5f36f49703$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_: function () {
@@ -16552,6 +16710,16 @@ function $ddd39c5f36f49703$export$f2dc7e4e4aa11abb(props) {
       modalVersionUsed_: shared_properties.modalVersionUsed_,
       showSliderArrow_: () => props.showSliderArrow_,
       i18n_: shared_properties.i18n_,
+      inputFieldRef_: input_element => {
+        const shared_info_right_now = $ddd39c5f36f49703$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;
+        $ddd39c5f36f49703$export$dde08b2dca8cc1ce.set(depict_search, {
+          ...shared_info_right_now,
+          search_page_input_element_: input_element
+        });
+      },
       modalAlignmentSignalsRef_: style => {
         const shared_info_right_now = $ddd39c5f36f49703$export$dde08b2dca8cc1ce.get(depict_search);
         if (!shared_info_right_now) return;
@@ -16998,7 +17166,7 @@ function $98aef9965764903d$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_;
@@ -17041,7 +17209,7 @@ function $98aef9965764903d$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/ES10/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;