@depict-ai/ui 4.3.14 → 4.4.1

package/server/latest/index.js

@@ -7,7 +7,7 @@ import { createStore as $i7OB2$createStore, reconcile as $i7OB2$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.3.14";
+const $ec291e0010116877$export$83d89fbfd8236492 = "4.4.1";
 const $b5cccc8ee7d24677$var$transform_elements = sorted_cols_at_size => {
   const cols_at_size = [];
   for (let i = 0; i < sorted_cols_at_size.length; i++) {
@@ -2798,10 +2798,11 @@ let $f86ba724282f6690$export$44dad306455dddf;
   DEPICT_ID["SEARCH_PAGE"] = "depict-search-page";
   DEPICT_ID["PLP_CATEGORY"] = "depict-plp-category";
 })($f86ba724282f6690$export$44dad306455dddf || ($f86ba724282f6690$export$44dad306455dddf = {}));
-var $5285d2814d0fac0c$var$_tmpl$ = ["<button", ' class="back" type="button"', ">", "</button>"],
-  $5285d2814d0fac0c$var$_tmpl$2 = ["<div", ' class="search-field" role="search"><!--$-->', '<!--/--><div class="field"><input class="', '" tabindex="0"', '><button type="button" class="clear"', ' style="', '">', "</button></div>", "</div>"];
+var $5285d2814d0fac0c$var$_tmpl$ = ["<div", ' style="', '" class="spacer"></div>'],
+  $5285d2814d0fac0c$var$_tmpl$2 = ["<button", ' class="submit major" type="button"', ">", "</button>"],
+  $5285d2814d0fac0c$var$_tmpl$3 = ["<div", ' class="', '" role="search"><!--$-->', "<!--/--><!--$-->", '<!--/--><div class="field"><!--$-->', '<!--/--><input class="', '" tabindex="0"', "><!--$-->", "<!--/--></div><!--$-->", "<!--/--><!--$-->", "<!--/--></div>"];
 function $5285d2814d0fac0c$export$b94867ecbd698f21({
-  search_field_value_: search_field_value_,
+  search_field_value_: [searchFieldValue, setSearchFieldValue],
   input_field_ref_: input_field_ref_,
   field_element_ref_: field_element_ref_,
   submit_query_: submit_query_,
@@ -2812,7 +2813,7 @@ function $5285d2814d0fac0c$export$b94867ecbd698f21({
   i18n_: i18n_,
   after_focusing_: after_focusing_,
   BackIcon_: BackIcon_,
-  submit_button_ref_: submit_button_ref_
+  buttonInFieldRef_: buttonInFieldRef_
 }) {
   let input_element;
   // This is the div where we recommend (and ourselves do) attach the event listener to that opens the search modal.
@@ -2826,19 +2827,62 @@ function $5285d2814d0fac0c$export$b94867ecbd698f21({
   })); // focus field on render
   const owner_of_field_element = $i7OB2$getOwner();
   const isNewModal = BackIcon_[(0, $66db7a014e20802e$export$1ea76ea778b880dd)] === 2;
-  return $i7OB2$ssr($5285d2814d0fac0c$var$_tmpl$2, $i7OB2$ssrHydrationKey(), $i7OB2$escape($i7OB2$createComponent((0, $i7OB2$Show), {
+  const [backButtonWidthAccessor, setBackButtonWidthAccessor] = $i7OB2$createSignal();
+  const getBackButtonWidth = () => backButtonWidthAccessor()?.();
+  const searchFieldEmpty = $i7OB2$createMemo(() => !searchFieldValue());
+  const BackButton = () => $i7OB2$createComponent((0, $i7OB2$Show), {
     when: on_back_,
     get children() {
-      return $i7OB2$ssr($5285d2814d0fac0c$var$_tmpl$, $i7OB2$ssrHydrationKey(), $i7OB2$ssrAttribute("aria-label", $i7OB2$escape(i18n_.back_(), true), false), $i7OB2$escape($i7OB2$createComponent(BackIcon_, {})));
+      return $i7OB2$ssrElement("button", $i7OB2$mergeProps({
+        "class": "back",
+        type: "button",
+        get ["aria-label"]() {
+          return i18n_.back_();
+        }
+      }, isNewModal && {
+        ref: el => {
+          setBackButtonWidthAccessor(() => $2449872a62a75a20$export$ebdc3711f7e02ccd(el));
+          $i7OB2$onCleanup(() => setBackButtonWidthAccessor());
+        }
+      }), () => isNewModal ? $i7OB2$escape($i7OB2$createComponent((0, $19976a74d273070d$export$3b621d86b1566b2), {})) : $i7OB2$escape($i7OB2$createComponent(BackIcon_, {})), true);
     }
-  })), `query ${!!on_back_ ? "has-adjacent-back-button" : ""}`, $i7OB2$ssrAttribute("aria-label", $i7OB2$escape(i18n_.search_field_field_aria_label_(), true), false) + $i7OB2$ssrAttribute("value", $i7OB2$escape(search_field_value_[0](), true), false) + $i7OB2$ssrAttribute("placeholder", $i7OB2$escape(i18n_.placeholder_text_(), true), false), $i7OB2$ssrAttribute("title", $i7OB2$escape(i18n_.clear_filters_query_sorting_after_submit_(), true), false), $i7OB2$ssrStyle($i7OB2$createMemo(() => search_field_value_[0]() ? "" : "display: none")()), $i7OB2$escape($i7OB2$createComponent((0, $19976a74d273070d$export$3b621d86b1566b2), {})), $i7OB2$ssrElement("button", $i7OB2$mergeProps({
-    "class": "submit major",
-    type: "button"
-  }, () => isNewModal ? {
-    tabindex: "-1"
+  });
+  const ClearButton = () => $i7OB2$ssrElement("button", $i7OB2$mergeProps({
+    type: "button",
+    get ["class"]() {
+      return `clear ${searchFieldEmpty() ? "empty" : ""}`;
+    },
+    get style() {
+      return isNewModal || !searchFieldEmpty() ? "" : "display: none";
+    }
+  }, () => searchFieldEmpty() ? {
+    "aria-hidden": "true"
   } : {
-    "aria-label": i18n_.search_submit_button_aria_label_()
-  }), () => $i7OB2$escape($i7OB2$createComponent((0, $16f0ed5ea30d8d9c$export$82eafebb825fc23f), {})), false));
+    title: i18n_.clear_filters_query_sorting_after_submit_()
+  }), () => isNewModal ? $i7OB2$escape($i7OB2$createComponent((0, $i7OB2$Show), {
+    get when() {
+      return !searchFieldEmpty();
+    },
+    get fallback() {
+      return $i7OB2$createComponent((0, $16f0ed5ea30d8d9c$export$82eafebb825fc23f), {});
+    },
+    get children() {
+      return $i7OB2$createComponent(BackIcon_, {});
+    }
+  })) : $i7OB2$escape($i7OB2$createComponent((0, $19976a74d273070d$export$3b621d86b1566b2), {})), true);
+  return $i7OB2$ssr($5285d2814d0fac0c$var$_tmpl$3, $i7OB2$ssrHydrationKey(), `search-field ${!!on_back_ ? "in-modal" : ""}`, $i7OB2$escape($i7OB2$createComponent((0, $i7OB2$Show), {
+    get when() {
+      return getBackButtonWidth() !== undefined && on_back_;
+    },
+    get children() {
+      return $i7OB2$ssr($5285d2814d0fac0c$var$_tmpl$, $i7OB2$ssrHydrationKey(), "width:" + ($i7OB2$escape(getBackButtonWidth(), true) + "px"));
+    }
+  })), !isNewModal && $i7OB2$escape($i7OB2$createComponent(BackButton, {})), isNewModal && $i7OB2$escape($i7OB2$createComponent(ClearButton, {})), `query ${!!on_back_ ? "has-adjacent-back-button" : ""}`, $i7OB2$ssrAttribute("aria-label", $i7OB2$escape(i18n_.search_field_field_aria_label_(), true), false) + $i7OB2$ssrAttribute("value", $i7OB2$escape(searchFieldValue(), true), false) + $i7OB2$ssrAttribute("placeholder", $i7OB2$escape(i18n_.placeholder_text_(), true), false), !isNewModal && $i7OB2$escape($i7OB2$createComponent(ClearButton, {})), isNewModal && $i7OB2$escape($i7OB2$createComponent(BackButton, {})), $i7OB2$escape($i7OB2$createComponent((0, $i7OB2$Show), {
+    when: !isNewModal,
+    get children() {
+      return $i7OB2$ssr($5285d2814d0fac0c$var$_tmpl$2, $i7OB2$ssrHydrationKey(), $i7OB2$ssrAttribute("aria-label", $i7OB2$escape(i18n_.search_submit_button_aria_label_(), true), false), $i7OB2$escape($i7OB2$createComponent((0, $16f0ed5ea30d8d9c$export$82eafebb825fc23f), {})));
+    }
+  })));
 }
 function $aea1edf92433e81e$export$fe334901e8bebd57() {
   const cleanup_fns = [];
@@ -3002,7 +3046,7 @@ function $42912431795f188e$var$RawClassicSearchModal({
     };
   });
   const search_field = $5285d2814d0fac0c$export$b94867ecbd698f21({
-    BackIcon_: () => $i7OB2$createComponent((0, $ffb84ffbf4014982$export$8d8893ffd8aca39a), {}),
+    BackIcon_: (0, $ffb84ffbf4014982$export$8d8893ffd8aca39a),
     input_field_ref_: element => set_input_field(element),
     override_on_enter_: e => on_enter_in_search_field_function?.(e),
     on_back_: close_modal_,
@@ -3018,7 +3062,6 @@ function $42912431795f188e$var$RawClassicSearchModal({
       input_el.setSelectionRange(start, end);
     }
   });
-  search_field.classList.add("in-modal");
   const modal_element = $i7OB2$ssr($42912431795f188e$var$_tmpl$3, $i7OB2$ssrHydrationKey(), `depict-search-modal`, `${`body` || ""} ${$i7OB2$escape($i7OB2$escape(random_classname, true), true)}`, $i7OB2$escape(search_field), $i7OB2$escape($i7OB2$createComponent((0, $b7436a6d1fd64e3b$export$b69d0d92862de18b), {
     severity_: "error",
     message_: "Autocomplete/suggestions failed",
@@ -4013,7 +4056,7 @@ function $500a16dd18ee5a71$var$RawSearchModalV2({
   };
   const discoverMoreSection = $i7OB2$ssr($500a16dd18ee5a71$var$_tmpl$2, $i7OB2$ssrHydrationKey(), get_search_field_value_() ? $i7OB2$escape(i18n_.modal_view_all_results_()($i7OB2$ssr($500a16dd18ee5a71$var$_tmpl$3, $i7OB2$ssrHydrationKey(), $i7OB2$escape(formattedTotalNumberResults())))) : $i7OB2$escape(i18n_.modal_discover_more_()));
   const search_field = $5285d2814d0fac0c$export$b94867ecbd698f21({
-    BackIcon_: () => $i7OB2$createComponent((0, $5cec65dd06ade2c4$export$11e9f390c90a537f), {}),
+    BackIcon_: (0, $5cec65dd06ade2c4$export$11e9f390c90a537f),
     input_field_ref_: element => set_input_field(element),
     override_on_enter_: e => on_enter_in_search_field_function?.(e),
     on_back_: close_modal_,
@@ -4029,7 +4072,6 @@ function $500a16dd18ee5a71$var$RawSearchModalV2({
       input_el.setSelectionRange(start, end);
     }
   });
-  search_field.classList.add("in-modal");
   if (setSearchFieldOuterWidth_) {
     const resizeObserver = new ResizeObserver($i7OB2$catchify(records => setSearchFieldOuterWidth_(records.at(-1).contentRect.width)));
     resizeObserver.observe(search_field);
@@ -10310,7 +10352,7 @@ function $0e562a5b247b1fc2$export$44f738469d5570cf({
   bodyAlignmentSignal_: [, setBodyAlignment_],
   backdropStyleSignal_: [, setBackdropStyle_],
   setPollAlignment_: setPollAlignment_,
-  submitButton_: submitButton_,
+  buttonInField_: buttonInField_,
   modalSearchFieldOuterWidth_: modalSearchFieldOuterWidth_
 }) {
   return $i7OB2$createRoot(dispose => {
@@ -10353,7 +10395,7 @@ function $0e562a5b247b1fc2$export$44f738469d5570cf({
     const closeDuration_ = pxOffCenter > 100 ? 150 : 100;
     setPollAlignment_(true);
     // Fade out submit button so there aren't two overlapping buttons for a split second
-    submitButton_.animate([{
+    if (pxOffCenter > 10) buttonInField_.animate([{
       opacity: 1
     }, {
       opacity: 0
@@ -10420,6 +10462,8 @@ function $0e562a5b247b1fc2$export$44f738469d5570cf({
         width: width,
         left: left
       } = fakeField.getBoundingClientRect();
+      // Just copy-pasted below line without thinking, it might be wrong
+      const pxOffCenter = Math.abs($i7OB2$untrack(innerWidthReactive) / 2 - (left + width / 2));
       $0a901077d5c8a2b2$export$23d40cc5971c3acd({
         setBackdropStyle_: setBackdropStyle_,
         setBodyAlignment_: setBodyAlignment_,
@@ -10435,12 +10479,12 @@ function $0e562a5b247b1fc2$export$44f738469d5570cf({
         duration: closeDuration_,
         fill: "forwards",
         easing: "ease-out"
-      }).finished, submitButton_.animate([{
+      }).finished, buttonInField_.animate([{
         opacity: 0
       }, {
         opacity: 1
       }], {
-        duration: closeDuration_ / 3,
+        duration: pxOffCenter > 10 ? closeDuration_ / 3 : 1,
         delay: closeDuration_ * (2 / 3),
         fill: "forwards"
       }).finished]);
@@ -10633,7 +10677,7 @@ function $7097477c78a89208$export$a54ec244c8863715({
       if (!input_field_accessor_value) break add_input_field;
       let input_element;
       let div_with_field_class;
-      let submitButton_;
+      let buttonInField;
       const search_field = SafeSearchField({
         i18n_: i18n_,
         search_field_value_: search_field_value_,
@@ -10643,7 +10687,7 @@ function $7097477c78a89208$export$a54ec244c8863715({
         field_element_ref_: el => div_with_field_class = el,
         disabled_: true,
         BackIcon_: BackIcon_,
-        submit_button_ref_: el => submitButton_ = el
+        buttonInFieldRef_: el => buttonInField = el
       });
       if (!search_field) break add_input_field;
       setModalBodyStyle({});
@@ -10677,7 +10721,7 @@ function $7097477c78a89208$export$a54ec244c8863715({
             bodyAlignmentSignal_: modal_body_style,
             backdropStyleSignal_: modal_backdrop_style,
             setPollAlignment_: setPollAlignment_,
-            submitButton_: submitButton_,
+            buttonInField_: buttonInField,
             modalSearchFieldOuterWidth_: modalSearchFieldOuterWidth_
           });
         }
@@ -11515,7 +11559,7 @@ function $58b3487626e85ece$export$316f6f283ae64765(props) {
   const shared_properties = $806c97b931758897$export$12fa711345994013(depict_search);
   return $16b52438165aafe2$export$23fca46f3143581f(() => {
     let input_element;
-    let submitButton_;
+    let buttonInField;
     const search_field = $i7OB2$createComponent((0, $5285d2814d0fac0c$export$b94867ecbd698f21), {
       get BackIcon_() {
         return shared_properties.BackIcon_;
@@ -11534,7 +11578,7 @@ function $58b3487626e85ece$export$316f6f283ae64765(props) {
       },
       disabled_: true,
       input_field_ref_: el => input_element = el,
-      submit_button_ref_: el => submitButton_ = el,
+      buttonInFieldRef_: el => buttonInField = el,
       field_element_ref_: field => {
         const bodyAlignmentSignal_ = $i7OB2$createSignal({
           position: "fixed"
@@ -11581,7 +11625,7 @@ function $58b3487626e85ece$export$316f6f283ae64765(props) {
               bodyAlignmentSignal_: bodyAlignmentSignal_,
               backdropStyleSignal_: backdropAlignmentSignal_,
               setPollAlignment_: setPollAlignment_,
-              submitButton_: submitButton_,
+              buttonInField_: buttonInField,
               modalSearchFieldOuterWidth_: modalSearchFieldOuterWidth_
             });
           }