@depict-ai/ui 4.10.19 → 4.10.20

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.20";
 function $dc9262ef6f786812$export$d9f36cf74e24d595(media_query) {
   const signal = $9HbP8$createSignal(false);
   $9HbP8$onCleanup($9HbP8$javascript_media_query(media_query, ({
@@ -2491,6 +2491,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,11 +2510,19 @@ 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({
+              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 {
@@ -2534,7 +2543,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);
@@ -10706,6 +10716,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 +10894,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") {
@@ -10986,6 +10997,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 +11035,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 +11061,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
@@ -11826,6 +11865,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 +11897,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);
@@ -13995,11 +14037,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 +14050,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 +14836,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 +15025,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 +15369,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 +15397,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 +15421,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 +15570,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 +15599,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 +15607,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 +15967,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 +16010,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.20",
   "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.12",
+    "@depict-ai/types": "^5.6.10",
+    "@depict-ai/utilishared": "^2.6.10",
     "solid-js": "^1.9.10"
   },
   "type": "module",