@depict-ai/ui 4.10.19 → 4.10.20

package/ES10/index.js

@@ -10,7 +10,7 @@ import $8tj43$babelruntimehelpersclassPrivateFieldGet from "@babel/runtime/helpe
 /*! Depict.ai search and product listing SDK */
 import { register_es_version } from "../multi_import_deduplicator.mjs";
 register_es_version("ui", "ES10");
-const $8db9a15135765c11$export$83d89fbfd8236492 = "4.10.19";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "4.10.20";
 function $00a5b94f0c11efbb$export$d9f36cf74e24d595(media_query) {
   const signal = $8tj43$createSignal(false);
   $8tj43$onCleanup($8tj43$javascript_media_query(media_query, _ref => {
@@ -2604,8 +2604,10 @@ async function $d5f1e6a0f9117286$export$79b1565500412d9b(search_modal, modal_fn_
     const modal_els = $8tj43$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 {
@@ -2624,11 +2626,19 @@ async function $d5f1e6a0f9117286$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 {
@@ -2650,7 +2660,8 @@ async function $d5f1e6a0f9117286$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);
@@ -11317,6 +11328,7 @@ var $584c06c09cf4609d$var$_tmpl$ = /*#__PURE__*/$8tj43$template(`<button class=b
   $584c06c09cf4609d$var$_tmpl$3 = /*#__PURE__*/$8tj43$template(`<div class=spacer>`),
   $584c06c09cf4609d$var$_tmpl$4 = /*#__PURE__*/$8tj43$template(`<button class="submit major"type=button>`),
   $584c06c09cf4609d$var$_tmpl$5 = /*#__PURE__*/$8tj43$template(`<div><!$><!/><!$><!/><div class=field><!$><!/><input class=query tabindex=0 enterkeyhint=search><!$><!/></div><!$><!/><!$><!/>`);
+const $584c06c09cf4609d$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 $584c06c09cf4609d$export$b94867ecbd698f21(_ref) {
   let {
     search_field_value_: [searchFieldValue, setSearchFieldValue],
@@ -11499,7 +11511,7 @@ function $584c06c09cf4609d$export$b94867ecbd698f21(_ref) {
       get onKeyDown() {
         return $8tj43$catchify1(e => {
           if (disabled_) {
-            if (e.key !== "Tab" && e.key !== "Shift")
+            if (!$584c06c09cf4609d$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") {
@@ -11604,6 +11616,33 @@ function $a82a41ab7188eda2$export$93d9bfd0c9c1a5b8(close_modal, search_query_url
     }
   })();
 }
+function $802b1d7ed155c277$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_ ? $8tj43$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] : $8tj43$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_) $8tj43$createEffect($8tj43$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 $40411f2ec772c376$var$_tmpl$ = /*#__PURE__*/$8tj43$template(`<div class=discover-more><button class=major type=button>`),
   $40411f2ec772c376$var$_tmpl$2 = /*#__PURE__*/$8tj43$template(`<b>`),
   $40411f2ec772c376$var$_tmpl$3 = /*#__PURE__*/$8tj43$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><!$><!/>`),
@@ -11618,6 +11657,8 @@ function $40411f2ec772c376$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_,
@@ -11642,15 +11683,16 @@ function $40411f2ec772c376$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_ ? $8tj43$createSignal("") : props_search_field_value;
-  const propagate_search_field_value_back = dont_sync_search_field_value_except_on_submit_ ? () => props_search_field_value[1]($8tj43$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_
+  } = $802b1d7ed155c277$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] = $8tj43$createSignal();
   const [get_search_field_value_] = search_field_value_;
   // Search field alignment unused in ClassicSearchModal since the search field spans the whole modal
@@ -12482,6 +12524,8 @@ function $06fcd2a345efd24d$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_,
@@ -12512,15 +12556,16 @@ function $06fcd2a345efd24d$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_ ? $8tj43$createSignal("") : props_search_field_value;
-  const propagate_search_field_value_back = dont_sync_search_field_value_except_on_submit_ ? () => props_search_field_value[1]($8tj43$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_
+  } = $802b1d7ed155c277$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] = $8tj43$createSignal();
   const [searching_for_value_, set_searching_for_value_] = $8tj43$createSignal();
   const [show_stale_content_results_, set_show_stale_content_results_] = $8tj43$createSignal(false);
@@ -14838,11 +14883,12 @@ async function $86b0ff0c85e5fc6c$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();
@@ -14850,21 +14896,92 @@ async function $86b0ff0c85e5fc6c$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 $8a9827cc2842b300$export$d13a185c53aa5edf(persisted_, get_search_query_) {
+  const [get_persisted, set_persisted] = persisted_;
+  const [get_submitting, set_submitting] = $8tj43$createSignal();
+  const get_value = $8tj43$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($8tj43$untrack(get_value)) : value;
+    if ($8tj43$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;
+    $8tj43$batch(() => {
+      const submitting = $8tj43$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, $8tj43$instant_exec_on_suspect_history_change).add(abort_on_popstate);
+  $8tj43$onCleanup(() => (0, $8tj43$instant_exec_on_suspect_history_change).delete(abort_on_popstate));
+  $8tj43$createEffect($8tj43$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
+    };
+    $8tj43$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;
+    $8tj43$batch(() => {
+      set_submitting(undefined);
+      set_persisted(query);
+    });
+  };
+  return {
+    value_: [get_value, set_value],
+    begin_submit_: begin_submit_,
+    settle_: settle_
+  };
 }
 function $96d57a48e7bce64f$export$181cceed5c91919e(callback, alsoRaF, passiveListener) {
   let aligned_this_microtask = false;
@@ -15608,6 +15725,7 @@ function $da279c5a540c6846$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_,
@@ -15812,6 +15930,8 @@ function $da279c5a540c6846$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);
+      $8tj43$onCleanup(() => inputFieldRef_ === null || inputFieldRef_ === void 0 ? void 0 : inputFieldRef_(undefined));
       const [pollAlignment, setPollAlignment_] = $8tj43$createSignal(false);
       const align_position = $8tj43$catchify1((0, $1308a7816c3d4f2d$export$b3ad617e9036868))(alignmentSignals_, search_field, (0, $1308a7816c3d4f2d$export$3f238c96c45e6cc6) | (0, $1308a7816c3d4f2d$export$7895aadd1956b1c7) | (modalVersionUsed_ === 1 ? (0, $1308a7816c3d4f2d$export$902f8b4a7dae5d78) : (0, $1308a7816c3d4f2d$export$6060bc6bee850eb6) | (0, $1308a7816c3d4f2d$export$5097308c5200105a)), true, pollAlignment);
       div_with_field_class.addEventListener("click", $8tj43$catchify1(e => {
@@ -16221,14 +16341,16 @@ class $eb064bc3350276c1$export$ac6237957a15b3f0 {
         set_search_content_results_rows((0, $d53ebed6f63304e4$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 => $86b0ff0c85e5fc6c$export$e16630ecb9644a1c({
+      const search_field_value_ = $8a9827cc2842b300$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_) => $86b0ff0c85e5fc6c$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 || $8tj43$untrack(get_search_field_value_),
+        before_navigate_: before_navigate_,
+        get_new_query: () => new_query !== null && new_query !== void 0 ? new_query : $8tj43$untrack(get_search_field_value_),
         url_transformer_: url_transformer,
         router_: $8tj43$babelruntimehelpersclassPrivateFieldGet(this, $eb064bc3350276c1$var$_router)
       });
@@ -16247,6 +16369,7 @@ class $eb064bc3350276c1$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_: $8tj43$babelruntimehelpersclassPrivateFieldGet(this, $eb064bc3350276c1$var$_router),
         url_transformer_: url_transformer,
         depict_api_: depict_api_,
@@ -16270,7 +16393,11 @@ class $eb064bc3350276c1$export$ac6237957a15b3f0 {
           $8tj43$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 = $eb064bc3350276c1$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,
@@ -16435,6 +16562,7 @@ function $eb064bc3350276c1$export$f2dc7e4e4aa11abb(props) {
     const {
       state_: state_
     } = shared_properties;
+    let registered_input_element;
     const grid_spacing_override = $8tj43$createMemo(() => {
       const {
         grid_spacing: grid_spacing
@@ -16466,7 +16594,7 @@ function $eb064bc3350276c1$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 : $eb064bc3350276c1$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 () {
@@ -16477,6 +16605,16 @@ function $eb064bc3350276c1$export$f2dc7e4e4aa11abb(props) {
       modalVersionUsed_: shared_properties.modalVersionUsed_,
       showSliderArrow_: () => props.showSliderArrow_,
       i18n_: shared_properties.i18n_,
+      inputFieldRef_: input_element => {
+        const shared_info_right_now = $eb064bc3350276c1$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;
+        $eb064bc3350276c1$export$dde08b2dca8cc1ce.set(depict_search, {
+          ...shared_info_right_now,
+          search_page_input_element_: input_element
+        });
+      },
       modalAlignmentSignalsRef_: style => {
         const shared_info_right_now = $eb064bc3350276c1$export$dde08b2dca8cc1ce.get(depict_search);
         if (!shared_info_right_now) return;
@@ -16923,7 +17061,7 @@ function $a3026fb727bc7550$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_;
@@ -16966,7 +17104,7 @@ function $a3026fb727bc7550$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_;