@depict-ai/ui 4.3.13 → 4.4.0

package/server/ES10/index.js

@@ -10,7 +10,7 @@ import { createStore as $b8hua$createStore, reconcile as $b8hua$reconcile } from
 /*! 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.3.13";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "4.4.0";
 const $a9c7ba6087881ac2$var$transform_elements = sorted_cols_at_size => {
   const cols_at_size = [];
   for (let i = 0; i < sorted_cols_at_size.length; i++) {
@@ -2965,11 +2965,12 @@ let $c3820807ac1e6fd7$export$44dad306455dddf;
   DEPICT_ID["SEARCH_PAGE"] = "depict-search-page";
   DEPICT_ID["PLP_CATEGORY"] = "depict-plp-category";
 })($c3820807ac1e6fd7$export$44dad306455dddf || ($c3820807ac1e6fd7$export$44dad306455dddf = {}));
-var $584c06c09cf4609d$var$_tmpl$ = ["<button", ' class="back" type="button"', ">", "</button>"],
-  $584c06c09cf4609d$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 $584c06c09cf4609d$var$_tmpl$ = ["<div", ' style="', '" class="spacer"></div>'],
+  $584c06c09cf4609d$var$_tmpl$2 = ["<button", ' class="submit major" type="button"', ">", "</button>"],
+  $584c06c09cf4609d$var$_tmpl$3 = ["<div", ' class="', '" role="search"><!--$-->', "<!--/--><!--$-->", '<!--/--><div class="field"><!--$-->', '<!--/--><input class="', '" tabindex="0"', "><!--$-->", "<!--/--></div><!--$-->", "<!--/--><!--$-->", "<!--/--></div>"];
 function $584c06c09cf4609d$export$b94867ecbd698f21(_ref) {
   let {
-    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_,
@@ -2994,19 +2995,65 @@ function $584c06c09cf4609d$export$b94867ecbd698f21(_ref) {
   })); // focus field on render
   const owner_of_field_element = $b8hua$getOwner();
   const isNewModal = BackIcon_[(0, $b026fa9c9c904a98$export$1ea76ea778b880dd)] === 2;
-  return $b8hua$ssr($584c06c09cf4609d$var$_tmpl$2, $b8hua$ssrHydrationKey(), $b8hua$escape($b8hua$createComponent((0, $b8hua$Show), {
+  const [backButtonWidthAccessor, setBackButtonWidthAccessor] = $b8hua$createSignal();
+  const getBackButtonWidth = () => {
+    var _backButtonWidthAcces;
+    return (_backButtonWidthAcces = backButtonWidthAccessor()) === null || _backButtonWidthAcces === void 0 ? void 0 : _backButtonWidthAcces();
+  };
+  const searchFieldEmpty = $b8hua$createMemo(() => !searchFieldValue());
+  const BackButton = () => $b8hua$createComponent((0, $b8hua$Show), {
     when: on_back_,
     get children() {
-      return $b8hua$ssr($584c06c09cf4609d$var$_tmpl$, $b8hua$ssrHydrationKey(), $b8hua$ssrAttribute("aria-label", $b8hua$escape(i18n_.back_(), true), false), $b8hua$escape($b8hua$createComponent(BackIcon_, {})));
+      return $b8hua$ssrElement("button", $b8hua$mergeProps({
+        "class": "back",
+        type: "button",
+        get ["aria-label"]() {
+          return i18n_.back_();
+        }
+      }, isNewModal && {
+        ref: el => {
+          setBackButtonWidthAccessor(() => $fc830a7ee59416ef$export$ebdc3711f7e02ccd(el));
+          $b8hua$onCleanup(() => setBackButtonWidthAccessor());
+        }
+      }), () => isNewModal ? $b8hua$escape($b8hua$createComponent((0, $9783d437ad61594c$export$3b621d86b1566b2), {})) : $b8hua$escape($b8hua$createComponent(BackIcon_, {})), true);
     }
-  })), "query ".concat(!!on_back_ ? "has-adjacent-back-button" : ""), $b8hua$ssrAttribute("aria-label", $b8hua$escape(i18n_.search_field_field_aria_label_(), true), false) + $b8hua$ssrAttribute("value", $b8hua$escape(search_field_value_[0](), true), false) + $b8hua$ssrAttribute("placeholder", $b8hua$escape(i18n_.placeholder_text_(), true), false), $b8hua$ssrAttribute("title", $b8hua$escape(i18n_.clear_filters_query_sorting_after_submit_(), true), false), $b8hua$ssrStyle($b8hua$createMemo(() => search_field_value_[0]() ? "" : "display: none")()), $b8hua$escape($b8hua$createComponent((0, $9783d437ad61594c$export$3b621d86b1566b2), {})), $b8hua$ssrElement("button", $b8hua$mergeProps({
-    "class": "submit major",
-    type: "button"
-  }, () => isNewModal ? {
-    tabindex: "-1"
+  });
+  const ClearButton = () => $b8hua$ssrElement("button", $b8hua$mergeProps({
+    type: "button",
+    get ["class"]() {
+      return "clear ".concat(searchFieldEmpty() ? "empty" : "");
+    },
+    get style() {
+      return isNewModal || !searchFieldEmpty() ? "" : "display: none";
+    }
+  }, () => searchFieldEmpty() ? {
+    "aria-hidden": "true"
   } : {
-    "aria-label": i18n_.search_submit_button_aria_label_()
-  }), () => $b8hua$escape($b8hua$createComponent((0, $ef0f18a578b32578$export$82eafebb825fc23f), {})), false));
+    title: i18n_.clear_filters_query_sorting_after_submit_()
+  }), () => isNewModal ? $b8hua$escape($b8hua$createComponent((0, $b8hua$Show), {
+    get when() {
+      return !searchFieldEmpty();
+    },
+    get fallback() {
+      return $b8hua$createComponent((0, $ef0f18a578b32578$export$82eafebb825fc23f), {});
+    },
+    get children() {
+      return $b8hua$createComponent(BackIcon_, {});
+    }
+  })) : $b8hua$escape($b8hua$createComponent((0, $9783d437ad61594c$export$3b621d86b1566b2), {})), true);
+  return $b8hua$ssr($584c06c09cf4609d$var$_tmpl$3, $b8hua$ssrHydrationKey(), "search-field ".concat(!!on_back_ ? "in-modal" : ""), $b8hua$escape($b8hua$createComponent((0, $b8hua$Show), {
+    get when() {
+      return getBackButtonWidth() !== undefined && on_back_;
+    },
+    get children() {
+      return $b8hua$ssr($584c06c09cf4609d$var$_tmpl$, $b8hua$ssrHydrationKey(), "width:" + ($b8hua$escape(getBackButtonWidth(), true) + "px"));
+    }
+  })), !isNewModal && $b8hua$escape($b8hua$createComponent(BackButton, {})), isNewModal && $b8hua$escape($b8hua$createComponent(ClearButton, {})), "query ".concat(!!on_back_ ? "has-adjacent-back-button" : ""), $b8hua$ssrAttribute("aria-label", $b8hua$escape(i18n_.search_field_field_aria_label_(), true), false) + $b8hua$ssrAttribute("value", $b8hua$escape(searchFieldValue(), true), false) + $b8hua$ssrAttribute("placeholder", $b8hua$escape(i18n_.placeholder_text_(), true), false), !isNewModal && $b8hua$escape($b8hua$createComponent(ClearButton, {})), isNewModal && $b8hua$escape($b8hua$createComponent(BackButton, {})), $b8hua$escape($b8hua$createComponent((0, $b8hua$Show), {
+    when: !isNewModal,
+    get children() {
+      return $b8hua$ssr($584c06c09cf4609d$var$_tmpl$2, $b8hua$ssrHydrationKey(), $b8hua$ssrAttribute("aria-label", $b8hua$escape(i18n_.search_submit_button_aria_label_(), true), false), $b8hua$escape($b8hua$createComponent((0, $ef0f18a578b32578$export$82eafebb825fc23f), {})));
+    }
+  })));
 }
 function $e56d241d0f33d459$export$fe334901e8bebd57() {
   const cleanup_fns = [];
@@ -3173,7 +3220,7 @@ function $40411f2ec772c376$var$RawClassicSearchModal(_ref) {
     };
   });
   const search_field = $584c06c09cf4609d$export$b94867ecbd698f21({
-    BackIcon_: () => $b8hua$createComponent((0, $fac58b5610eec6a9$export$8d8893ffd8aca39a), {}),
+    BackIcon_: (0, $fac58b5610eec6a9$export$8d8893ffd8aca39a),
     input_field_ref_: element => set_input_field(element),
     override_on_enter_: e => {
       var _on_enter_in_search_f;
@@ -3192,7 +3239,6 @@ function $40411f2ec772c376$var$RawClassicSearchModal(_ref) {
       input_el.setSelectionRange(start, end);
     }
   });
-  search_field.classList.add("in-modal");
   const modal_element = $b8hua$ssr($40411f2ec772c376$var$_tmpl$3, $b8hua$ssrHydrationKey(), "depict-search-modal", "".concat("body", " ").concat($b8hua$escape($b8hua$escape(random_classname, true), true)), $b8hua$escape(search_field), $b8hua$escape($b8hua$createComponent((0, $74777e8fe65b3dcb$export$b69d0d92862de18b), {
     severity_: "error",
     message_: "Autocomplete/suggestions failed",
@@ -4230,7 +4276,7 @@ function $06fcd2a345efd24d$var$RawSearchModalV2(_ref) {
   };
   const discoverMoreSection = $b8hua$ssr($06fcd2a345efd24d$var$_tmpl$2, $b8hua$ssrHydrationKey(), get_search_field_value_() ? $b8hua$escape(i18n_.modal_view_all_results_()($b8hua$ssr($06fcd2a345efd24d$var$_tmpl$3, $b8hua$ssrHydrationKey(), $b8hua$escape(formattedTotalNumberResults())))) : $b8hua$escape(i18n_.modal_discover_more_()));
   const search_field = $584c06c09cf4609d$export$b94867ecbd698f21({
-    BackIcon_: () => $b8hua$createComponent((0, $c2fe922d21c40514$export$11e9f390c90a537f), {}),
+    BackIcon_: (0, $c2fe922d21c40514$export$11e9f390c90a537f),
     input_field_ref_: element => set_input_field(element),
     override_on_enter_: e => {
       var _on_enter_in_search_f;
@@ -4249,7 +4295,6 @@ function $06fcd2a345efd24d$var$RawSearchModalV2(_ref) {
       input_el.setSelectionRange(start, end);
     }
   });
-  search_field.classList.add("in-modal");
   if (setSearchFieldOuterWidth_) {
     const resizeObserver = new ResizeObserver($b8hua$catchify(records => setSearchFieldOuterWidth_(records.at(-1).contentRect.width)));
     resizeObserver.observe(search_field);
@@ -11070,7 +11115,7 @@ function $937791b86d3d1509$export$44f738469d5570cf(_ref) {
     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([{
+    submitButton_ === null || submitButton_ === void 0 || submitButton_.animate([{
       opacity: 1
     }, {
       opacity: 0
@@ -11152,7 +11197,7 @@ function $937791b86d3d1509$export$44f738469d5570cf(_ref) {
         duration: closeDuration_,
         fill: "forwards",
         easing: "ease-out"
-      }).finished, submitButton_.animate([{
+      }).finished, submitButton_ === null || submitButton_ === void 0 ? void 0 : submitButton_.animate([{
         opacity: 0
       }, {
         opacity: 1

package/server/latest/index.cjs

@@ -94,7 +94,7 @@ $parcel$export(module.exports, "BreadCrumbs", () => $1f4925833f07df29$export$5b7
 $parcel$export(module.exports, "QuickLinks", () => $1f4925833f07df29$export$de035477d6fef996);
 $parcel$export(module.exports, "CategoryPage", () => $14f289047713d67a$export$e2bf8ce7779e827e);
 /*! Depict.ai search and product listing SDK */
-const $b757f75811f3261f$export$83d89fbfd8236492 = "4.3.13";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "4.4.0";
 const $4e04be41243c3d80$var$transform_elements = sorted_cols_at_size => {
   const cols_at_size = [];
   for (let i = 0; i < sorted_cols_at_size.length; i++) {
@@ -2885,10 +2885,11 @@ let $0b6e2070a98de347$export$44dad306455dddf;
   DEPICT_ID["SEARCH_PAGE"] = "depict-search-page";
   DEPICT_ID["PLP_CATEGORY"] = "depict-plp-category";
 })($0b6e2070a98de347$export$44dad306455dddf || ($0b6e2070a98de347$export$44dad306455dddf = {}));
-var $66b8b9a9613c141d$var$_tmpl$ = ["<button", ' class="back" type="button"', ">", "</button>"],
-  $66b8b9a9613c141d$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 $66b8b9a9613c141d$var$_tmpl$ = ["<div", ' style="', '" class="spacer"></div>'],
+  $66b8b9a9613c141d$var$_tmpl$2 = ["<button", ' class="submit major" type="button"', ">", "</button>"],
+  $66b8b9a9613c141d$var$_tmpl$3 = ["<div", ' class="', '" role="search"><!--$-->', "<!--/--><!--$-->", '<!--/--><div class="field"><!--$-->', '<!--/--><input class="', '" tabindex="0"', "><!--$-->", "<!--/--></div><!--$-->", "<!--/--><!--$-->", "<!--/--></div>"];
 function $66b8b9a9613c141d$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_,
@@ -2913,19 +2914,62 @@ function $66b8b9a9613c141d$export$b94867ecbd698f21({
   })); // focus field on render
   const owner_of_field_element = $5vyXB$solidjs.getOwner();
   const isNewModal = BackIcon_[(0, $ad1fa088e5509cca$export$1ea76ea778b880dd)] === 2;
-  return $5vyXB$solidjsweb.ssr($66b8b9a9613c141d$var$_tmpl$2, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
+  const [backButtonWidthAccessor, setBackButtonWidthAccessor] = $5vyXB$solidjs.createSignal();
+  const getBackButtonWidth = () => backButtonWidthAccessor()?.();
+  const searchFieldEmpty = $5vyXB$solidjs.createMemo(() => !searchFieldValue());
+  const BackButton = () => $5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
     when: on_back_,
     get children() {
-      return $5vyXB$solidjsweb.ssr($66b8b9a9613c141d$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.ssrAttribute("aria-label", $5vyXB$solidjsweb.escape(i18n_.back_(), true), false), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent(BackIcon_, {})));
+      return $5vyXB$solidjsweb.ssrElement("button", $5vyXB$solidjsweb.mergeProps({
+        "class": "back",
+        type: "button",
+        get ["aria-label"]() {
+          return i18n_.back_();
+        }
+      }, isNewModal && {
+        ref: el => {
+          setBackButtonWidthAccessor(() => $f13855d1b951b24a$export$ebdc3711f7e02ccd(el));
+          $5vyXB$solidjs.onCleanup(() => setBackButtonWidthAccessor());
+        }
+      }), () => isNewModal ? $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $c77c68e559a1506c$export$3b621d86b1566b2), {})) : $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent(BackIcon_, {})), true);
     }
-  })), `query ${!!on_back_ ? "has-adjacent-back-button" : ""}`, $5vyXB$solidjsweb.ssrAttribute("aria-label", $5vyXB$solidjsweb.escape(i18n_.search_field_field_aria_label_(), true), false) + $5vyXB$solidjsweb.ssrAttribute("value", $5vyXB$solidjsweb.escape(search_field_value_[0](), true), false) + $5vyXB$solidjsweb.ssrAttribute("placeholder", $5vyXB$solidjsweb.escape(i18n_.placeholder_text_(), true), false), $5vyXB$solidjsweb.ssrAttribute("title", $5vyXB$solidjsweb.escape(i18n_.clear_filters_query_sorting_after_submit_(), true), false), $5vyXB$solidjsweb.ssrStyle($5vyXB$solidjs.createMemo(() => search_field_value_[0]() ? "" : "display: none")()), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $c77c68e559a1506c$export$3b621d86b1566b2), {})), $5vyXB$solidjsweb.ssrElement("button", $5vyXB$solidjsweb.mergeProps({
-    "class": "submit major",
-    type: "button"
-  }, () => isNewModal ? {
-    tabindex: "-1"
+  });
+  const ClearButton = () => $5vyXB$solidjsweb.ssrElement("button", $5vyXB$solidjsweb.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_()
-  }), () => $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $87d7574e1d89d69b$export$82eafebb825fc23f), {})), false));
+    title: i18n_.clear_filters_query_sorting_after_submit_()
+  }), () => isNewModal ? $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
+    get when() {
+      return !searchFieldEmpty();
+    },
+    get fallback() {
+      return $5vyXB$solidjsweb.createComponent((0, $87d7574e1d89d69b$export$82eafebb825fc23f), {});
+    },
+    get children() {
+      return $5vyXB$solidjsweb.createComponent(BackIcon_, {});
+    }
+  })) : $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $c77c68e559a1506c$export$3b621d86b1566b2), {})), true);
+  return $5vyXB$solidjsweb.ssr($66b8b9a9613c141d$var$_tmpl$3, $5vyXB$solidjsweb.ssrHydrationKey(), `search-field ${!!on_back_ ? "in-modal" : ""}`, $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
+    get when() {
+      return getBackButtonWidth() !== undefined && on_back_;
+    },
+    get children() {
+      return $5vyXB$solidjsweb.ssr($66b8b9a9613c141d$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), "width:" + ($5vyXB$solidjsweb.escape(getBackButtonWidth(), true) + "px"));
+    }
+  })), !isNewModal && $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent(BackButton, {})), isNewModal && $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent(ClearButton, {})), `query ${!!on_back_ ? "has-adjacent-back-button" : ""}`, $5vyXB$solidjsweb.ssrAttribute("aria-label", $5vyXB$solidjsweb.escape(i18n_.search_field_field_aria_label_(), true), false) + $5vyXB$solidjsweb.ssrAttribute("value", $5vyXB$solidjsweb.escape(searchFieldValue(), true), false) + $5vyXB$solidjsweb.ssrAttribute("placeholder", $5vyXB$solidjsweb.escape(i18n_.placeholder_text_(), true), false), !isNewModal && $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent(ClearButton, {})), isNewModal && $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent(BackButton, {})), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
+    when: !isNewModal,
+    get children() {
+      return $5vyXB$solidjsweb.ssr($66b8b9a9613c141d$var$_tmpl$2, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.ssrAttribute("aria-label", $5vyXB$solidjsweb.escape(i18n_.search_submit_button_aria_label_(), true), false), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $87d7574e1d89d69b$export$82eafebb825fc23f), {})));
+    }
+  })));
 }
 function $ca1176b694a6ee2e$export$fe334901e8bebd57() {
   const cleanup_fns = [];
@@ -3089,7 +3133,7 @@ function $44f0b2e312a9b710$var$RawClassicSearchModal({
     };
   });
   const search_field = $66b8b9a9613c141d$export$b94867ecbd698f21({
-    BackIcon_: () => $5vyXB$solidjsweb.createComponent((0, $610b584d4f54699e$export$8d8893ffd8aca39a), {}),
+    BackIcon_: (0, $610b584d4f54699e$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_,
@@ -3105,7 +3149,6 @@ function $44f0b2e312a9b710$var$RawClassicSearchModal({
       input_el.setSelectionRange(start, end);
     }
   });
-  search_field.classList.add("in-modal");
   const modal_element = $5vyXB$solidjsweb.ssr($44f0b2e312a9b710$var$_tmpl$3, $5vyXB$solidjsweb.ssrHydrationKey(), `depict-search-modal`, `${`body` || ""} ${$5vyXB$solidjsweb.escape($5vyXB$solidjsweb.escape(random_classname, true), true)}`, $5vyXB$solidjsweb.escape(search_field), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $edafe91daf3091d7$export$b69d0d92862de18b), {
     severity_: "error",
     message_: "Autocomplete/suggestions failed",
@@ -4100,7 +4143,7 @@ function $11597ae03e703a47$var$RawSearchModalV2({
   };
   const discoverMoreSection = $5vyXB$solidjsweb.ssr($11597ae03e703a47$var$_tmpl$2, $5vyXB$solidjsweb.ssrHydrationKey(), get_search_field_value_() ? $5vyXB$solidjsweb.escape(i18n_.modal_view_all_results_()($5vyXB$solidjsweb.ssr($11597ae03e703a47$var$_tmpl$3, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape(formattedTotalNumberResults())))) : $5vyXB$solidjsweb.escape(i18n_.modal_discover_more_()));
   const search_field = $66b8b9a9613c141d$export$b94867ecbd698f21({
-    BackIcon_: () => $5vyXB$solidjsweb.createComponent((0, $b8660a70353e03cf$export$11e9f390c90a537f), {}),
+    BackIcon_: (0, $b8660a70353e03cf$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_,
@@ -4116,7 +4159,6 @@ function $11597ae03e703a47$var$RawSearchModalV2({
       input_el.setSelectionRange(start, end);
     }
   });
-  search_field.classList.add("in-modal");
   if (setSearchFieldOuterWidth_) {
     const resizeObserver = new ResizeObserver($5vyXB$depictaiutilishared.catchify(records => setSearchFieldOuterWidth_(records.at(-1).contentRect.width)));
     resizeObserver.observe(search_field);
@@ -10440,7 +10482,7 @@ function $5cbaffcb5602e671$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([{
+    submitButton_?.animate([{
       opacity: 1
     }, {
       opacity: 0
@@ -10522,7 +10564,7 @@ function $5cbaffcb5602e671$export$44f738469d5570cf({
         duration: closeDuration_,
         fill: "forwards",
         easing: "ease-out"
-      }).finished, submitButton_.animate([{
+      }).finished, submitButton_?.animate([{
         opacity: 0
       }, {
         opacity: 1

package/server/latest/index.d.ts

@@ -10,7 +10,7 @@ import { ProductListingRequestV3 } from "@depict-ai/types/api/ProductListingRequ
 import { GetListingRequest } from "@depict-ai/types/api/GetListingRequest";
 import { BaseSearchRequestV3 } from "@depict-ai/types/api/BaseSearchRequestV3";
 import { SearchFilter as _SearchFilter3 } from "@depict-ai/types/api/SearchRequestV2";
-export const version = "4.3.13";
+export const version = "4.4.0";
 declare const LISTING_ID = "listingId";
 declare const EXTERNAL_ID = "externalId";
 type ScrollRestorationData = {

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.13";
+const $ec291e0010116877$export$83d89fbfd8236492 = "4.4.0";
 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_,
@@ -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);
@@ -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([{
+    submitButton_?.animate([{
       opacity: 1
     }, {
       opacity: 0
@@ -10435,7 +10477,7 @@ function $0e562a5b247b1fc2$export$44f738469d5570cf({
         duration: closeDuration_,
         fill: "forwards",
         easing: "ease-out"
-      }).finished, submitButton_.animate([{
+      }).finished, submitButton_?.animate([{
         opacity: 0
       }, {
         opacity: 1