@depict-ai/ui 4.3.14 → 4.4.0

package/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.14";
+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++) {
@@ -3411,9 +3411,12 @@ let $0b6e2070a98de347$export$44dad306455dddf;
   DEPICT_ID["PLP_CATEGORY"] = "depict-plp-category";
 })($0b6e2070a98de347$export$44dad306455dddf || ($0b6e2070a98de347$export$44dad306455dddf = {}));
 var $66b8b9a9613c141d$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<button class=back type=button>`),
-  $66b8b9a9613c141d$var$_tmpl$2 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=search-field role=search><!$><!/><div class=field><input class=query tabindex=0><button type=button class=clear></button></div><button class="submit major"type=button>`);
+  $66b8b9a9613c141d$var$_tmpl$2 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<button type=button class=clear>`),
+  $66b8b9a9613c141d$var$_tmpl$3 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=spacer>`),
+  $66b8b9a9613c141d$var$_tmpl$4 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<button class="submit major"type=button>`),
+  $66b8b9a9613c141d$var$_tmpl$5 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=search-field role=search><!$><!/><!$><!/><div class=field><!$><!/><input class=query tabindex=0><!$><!/></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_,
@@ -3438,30 +3441,102 @@ function $66b8b9a9613c141d$export$b94867ecbd698f21({
   })); // focus field on render
   const owner_of_field_element = $gVhhF$solidjs.getOwner();
   const isNewModal = BackIcon_[(0, $ad1fa088e5509cca$export$1ea76ea778b880dd)] === 2;
+  const [backButtonWidthAccessor, setBackButtonWidthAccessor] = $gVhhF$solidjs.createSignal();
+  const getBackButtonWidth = () => backButtonWidthAccessor()?.();
+  const searchFieldEmpty = $gVhhF$solidjs.createMemo(() => !searchFieldValue());
+  const BackButton = () => $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
+    when: on_back_,
+    get children() {
+      var _el$ = $gVhhF$solidjsweb.getNextElement($66b8b9a9613c141d$var$_tmpl$);
+      $gVhhF$solidjsweb.spread(_el$, $gVhhF$solidjsweb.mergeProps({
+        get onClick() {
+          return $gVhhF$depictaiutilishared.catchify(on_back_);
+        },
+        get ["aria-label"]() {
+          return i18n_.back_();
+        }
+      }, isNewModal && {
+        ref: el => {
+          setBackButtonWidthAccessor(() => $f13855d1b951b24a$export$ebdc3711f7e02ccd(el));
+          $gVhhF$solidjs.onCleanup(() => setBackButtonWidthAccessor());
+        }
+      }), false, true);
+      $gVhhF$solidjsweb.insert(_el$, isNewModal ? $gVhhF$solidjsweb.createComponent((0, $c77c68e559a1506c$export$3b621d86b1566b2), {}) : $gVhhF$solidjsweb.createComponent(BackIcon_, {}));
+      $gVhhF$solidjsweb.runHydrationEvents();
+      return _el$;
+    }
+  });
+  const ClearButton = () => (() => {
+    var _el$2 = $gVhhF$solidjsweb.getNextElement($66b8b9a9613c141d$var$_tmpl$2);
+    $gVhhF$solidjsweb.spread(_el$2, $gVhhF$solidjsweb.mergeProps({
+      get classList() {
+        return {
+          empty: searchFieldEmpty()
+        };
+      },
+      get style() {
+        return isNewModal || !searchFieldEmpty() ? "" : "display: none";
+      },
+      get onClick() {
+        return $gVhhF$depictaiutilishared.catchify(() => {
+          if (isNewModal && searchFieldEmpty()) return;
+          setSearchFieldValue("");
+          clear_filters_(true);
+          if (!disabled_) input_element.focus();
+        });
+      }
+    }, () => searchFieldEmpty() ? {
+      "aria-hidden": "true"
+    } : {
+      title: i18n_.clear_filters_query_sorting_after_submit_()
+    }), false, true);
+    $gVhhF$solidjsweb.insert(_el$2, isNewModal ? $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
+      get when() {
+        return !searchFieldEmpty();
+      },
+      get fallback() {
+        return $gVhhF$solidjsweb.createComponent((0, $87d7574e1d89d69b$export$82eafebb825fc23f), {});
+      },
+      get children() {
+        return $gVhhF$solidjsweb.createComponent(BackIcon_, {});
+      }
+    }) : $gVhhF$solidjsweb.createComponent((0, $c77c68e559a1506c$export$3b621d86b1566b2), {}));
+    $gVhhF$solidjsweb.runHydrationEvents();
+    return _el$2;
+  })();
   return (() => {
-    var _el$ = $gVhhF$solidjsweb.getNextElement($66b8b9a9613c141d$var$_tmpl$2),
-      _el$7 = _el$.firstChild,
+    var _el$3 = $gVhhF$solidjsweb.getNextElement($66b8b9a9613c141d$var$_tmpl$5),
+      _el$12 = _el$3.firstChild,
+      [_el$13, _co$3] = $gVhhF$solidjsweb.getNextMarker(_el$12.nextSibling),
+      _el$14 = _el$13.nextSibling,
+      [_el$15, _co$4] = $gVhhF$solidjsweb.getNextMarker(_el$14.nextSibling),
+      _el$5 = _el$15.nextSibling,
+      _el$7 = _el$5.firstChild,
       [_el$8, _co$] = $gVhhF$solidjsweb.getNextMarker(_el$7.nextSibling),
-      _el$3 = _el$8.nextSibling,
-      _el$4 = _el$3.firstChild,
-      _el$5 = _el$4.nextSibling,
-      _el$6 = _el$3.nextSibling;
-    $gVhhF$solidjsweb.insert(_el$, $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
-      when: on_back_,
+      _el$6 = _el$8.nextSibling,
+      _el$9 = _el$6.nextSibling,
+      [_el$10, _co$2] = $gVhhF$solidjsweb.getNextMarker(_el$9.nextSibling),
+      _el$16 = _el$5.nextSibling,
+      [_el$17, _co$5] = $gVhhF$solidjsweb.getNextMarker(_el$16.nextSibling),
+      _el$18 = _el$17.nextSibling,
+      [_el$19, _co$6] = $gVhhF$solidjsweb.getNextMarker(_el$18.nextSibling);
+    _el$3.classList.toggle("in-modal", !!!!on_back_);
+    $gVhhF$solidjsweb.insert(_el$3, $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
+      get when() {
+        return getBackButtonWidth() !== undefined && on_back_;
+      },
       get children() {
-        var _el$2 = $gVhhF$solidjsweb.getNextElement($66b8b9a9613c141d$var$_tmpl$);
-        $gVhhF$solidjsweb.addEventListener(_el$2, "click", $gVhhF$depictaiutilishared.catchify(on_back_), true);
-        $gVhhF$solidjsweb.insert(_el$2, $gVhhF$solidjsweb.createComponent(BackIcon_, {}));
-        $gVhhF$solidjsweb.effect(() => $gVhhF$solidjsweb.setAttribute(_el$2, "aria-label", i18n_.back_()));
-        $gVhhF$solidjsweb.runHydrationEvents();
-        return _el$2;
+        var _el$4 = $gVhhF$solidjsweb.getNextElement($66b8b9a9613c141d$var$_tmpl$3);
+        $gVhhF$solidjsweb.effect(() => (getBackButtonWidth(), _el$4.style.setProperty("width", getBackButtonWidth() + "px")));
+        return _el$4;
       }
-    }), _el$8, _co$);
+    }), _el$13, _co$3);
+    $gVhhF$solidjsweb.insert(_el$3, !isNewModal && $gVhhF$solidjsweb.createComponent(BackButton, {}), _el$15, _co$4);
     $gVhhF$solidjsweb.use(el => {
       field_div = el;
       field_element_ref_?.(el);
-    }, _el$3);
-    $gVhhF$solidjsweb.addEventListener(_el$3, "click", $gVhhF$depictaiutilishared.catchify(({
+    }, _el$5);
+    $gVhhF$solidjsweb.addEventListener(_el$5, "click", $gVhhF$depictaiutilishared.catchify(({
       target: target,
       currentTarget: currentTarget,
       detail: detail
@@ -3485,7 +3560,8 @@ function $66b8b9a9613c141d$export$b94867ecbd698f21({
         }
       }
     }), true);
-    _el$4.$$pointerdown = ({
+    $gVhhF$solidjsweb.insert(_el$5, isNewModal && $gVhhF$solidjsweb.createComponent(ClearButton, {}), _el$8, _co$);
+    _el$6.$$pointerdown = ({
       pointerType: pointerType
     }) => {
       // When selecting text with a mouse we want a SearchField to be focussed even when releasing the mouse outside the .field element (we assume the event listener which opens the modal is attached to that).
@@ -3503,7 +3579,7 @@ function $66b8b9a9613c141d$export$b94867ecbd698f21({
         $gVhhF$solidjs.runWithOwner(owner_of_field_element, () => $gVhhF$solidjs.onCleanup(() => window.removeEventListener("pointerup", handler)));
       }
     };
-    $gVhhF$solidjsweb.addEventListener(_el$4, "select", $gVhhF$depictaiutilishared.catchify(() => {
+    $gVhhF$solidjsweb.addEventListener(_el$6, "select", $gVhhF$depictaiutilishared.catchify(() => {
       if (disabled_)
         // just in case. The field not actually being disabled when being disabled_ is so that you can focus it and open the modal. We don't want any of the other input-field-interaction features to work
         return;
@@ -3515,14 +3591,14 @@ function $66b8b9a9613c141d$export$b94867ecbd698f21({
           once: true
         });
     }));
-    $gVhhF$solidjsweb.addEventListener(_el$4, "input", $gVhhF$depictaiutilishared.catchify(() => {
+    $gVhhF$solidjsweb.addEventListener(_el$6, "input", $gVhhF$depictaiutilishared.catchify(() => {
       const {
         value: value
       } = input_element;
       if (!disabled_ && !value.length) clear_filters_(false); // if the user clears the whole field, reset filters on next submit
-      search_field_value_[1](value);
+      setSearchFieldValue(value);
     }), true);
-    $gVhhF$solidjsweb.addEventListener(_el$4, "keydown", $gVhhF$depictaiutilishared.catchify(e => {
+    $gVhhF$solidjsweb.addEventListener(_el$6, "keydown", $gVhhF$depictaiutilishared.catchify(e => {
       if (disabled_) {
         if (e.key !== "Tab" && e.key !== "Shift")
           // 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
@@ -3536,45 +3612,36 @@ function $66b8b9a9613c141d$export$b94867ecbd698f21({
       input_element = el;
       input_field_ref_?.(el);
     });
-    typeof _ref$ === "function" && $gVhhF$solidjsweb.use(_ref$, _el$4);
-    _el$4.classList.toggle("has-adjacent-back-button", !!!!on_back_);
-    $gVhhF$solidjsweb.addEventListener(_el$5, "click", $gVhhF$depictaiutilishared.catchify(() => {
-      search_field_value_[1]("");
-      clear_filters_(true);
-      if (!disabled_) input_element.focus();
-    }), true);
-    $gVhhF$solidjsweb.insert(_el$5, $gVhhF$solidjsweb.createComponent((0, $c77c68e559a1506c$export$3b621d86b1566b2), {}));
-    var _ref$2 = submit_button_ref_;
-    typeof _ref$2 === "function" ? $gVhhF$solidjsweb.use(_ref$2, _el$6) : submit_button_ref_ = _el$6;
-    $gVhhF$solidjsweb.spread(_el$6, $gVhhF$solidjsweb.mergeProps({
-      get onClick() {
-        return $gVhhF$depictaiutilishared.catchify(() => submit_query_());
+    typeof _ref$ === "function" && $gVhhF$solidjsweb.use(_ref$, _el$6);
+    _el$6.classList.toggle("has-adjacent-back-button", !!!!on_back_);
+    $gVhhF$solidjsweb.insert(_el$5, !isNewModal && $gVhhF$solidjsweb.createComponent(ClearButton, {}), _el$10, _co$2);
+    $gVhhF$solidjsweb.insert(_el$3, isNewModal && $gVhhF$solidjsweb.createComponent(BackButton, {}), _el$17, _co$5);
+    $gVhhF$solidjsweb.insert(_el$3, $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
+      when: !isNewModal,
+      get children() {
+        var _el$11 = $gVhhF$solidjsweb.getNextElement($66b8b9a9613c141d$var$_tmpl$4);
+        $gVhhF$solidjsweb.addEventListener(_el$11, "click", $gVhhF$depictaiutilishared.catchify(() => submit_query_()), true);
+        var _ref$2 = submit_button_ref_;
+        typeof _ref$2 === "function" ? $gVhhF$solidjsweb.use(_ref$2, _el$11) : submit_button_ref_ = _el$11;
+        $gVhhF$solidjsweb.insert(_el$11, $gVhhF$solidjsweb.createComponent((0, $87d7574e1d89d69b$export$82eafebb825fc23f), {}));
+        $gVhhF$solidjsweb.effect(() => $gVhhF$solidjsweb.setAttribute(_el$11, "aria-label", i18n_.search_submit_button_aria_label_()));
+        $gVhhF$solidjsweb.runHydrationEvents();
+        return _el$11;
       }
-    }, () => isNewModal ? {
-      tabindex: "-1"
-    } : {
-      "aria-label": i18n_.search_submit_button_aria_label_()
-    }), false, true);
-    $gVhhF$solidjsweb.insert(_el$6, $gVhhF$solidjsweb.createComponent((0, $87d7574e1d89d69b$export$82eafebb825fc23f), {}));
+    }), _el$19, _co$6);
     $gVhhF$solidjsweb.effect(_p$ => {
       var _v$ = i18n_.search_field_field_aria_label_(),
-        _v$2 = i18n_.placeholder_text_(),
-        _v$3 = i18n_.clear_filters_query_sorting_after_submit_(),
-        _v$4 = $gVhhF$solidjs.createMemo(() => search_field_value_[0]() ? "" : "display: none")();
-      _v$ !== _p$.e && $gVhhF$solidjsweb.setAttribute(_el$4, "aria-label", _p$.e = _v$);
-      _v$2 !== _p$.t && $gVhhF$solidjsweb.setAttribute(_el$4, "placeholder", _p$.t = _v$2);
-      _v$3 !== _p$.a && $gVhhF$solidjsweb.setAttribute(_el$5, "title", _p$.a = _v$3);
-      _p$.o = $gVhhF$solidjsweb.style(_el$5, _v$4, _p$.o);
+        _v$2 = i18n_.placeholder_text_();
+      _v$ !== _p$.e && $gVhhF$solidjsweb.setAttribute(_el$6, "aria-label", _p$.e = _v$);
+      _v$2 !== _p$.t && $gVhhF$solidjsweb.setAttribute(_el$6, "placeholder", _p$.t = _v$2);
       return _p$;
     }, {
       e: undefined,
-      t: undefined,
-      a: undefined,
-      o: undefined
+      t: undefined
     });
-    $gVhhF$solidjsweb.effect(() => $gVhhF$solidjsweb.setProperty(_el$4, "value", search_field_value_[0]()));
+    $gVhhF$solidjsweb.effect(() => $gVhhF$solidjsweb.setProperty(_el$6, "value", searchFieldValue()));
     $gVhhF$solidjsweb.runHydrationEvents();
-    return _el$;
+    return _el$3;
   })();
 }
 $gVhhF$solidjsweb.delegateEvents(["click", "keydown", "input", "pointerdown"]);
@@ -3754,7 +3821,7 @@ function $44f0b2e312a9b710$var$RawClassicSearchModal({
     };
   });
   const search_field = $66b8b9a9613c141d$export$b94867ecbd698f21({
-    BackIcon_: () => $gVhhF$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_,
@@ -3770,7 +3837,6 @@ function $44f0b2e312a9b710$var$RawClassicSearchModal({
       input_el.setSelectionRange(start, end);
     }
   });
-  search_field.classList.add("in-modal");
   const modal_element = (() => {
     var _el$4 = $gVhhF$solidjsweb.getNextElement($44f0b2e312a9b710$var$_tmpl$3),
       _el$5 = _el$4.firstChild,
@@ -4994,7 +5060,7 @@ function $11597ae03e703a47$var$RawSearchModalV2({
     return _el$7;
   })();
   const search_field = $66b8b9a9613c141d$export$b94867ecbd698f21({
-    BackIcon_: () => $gVhhF$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_,
@@ -5010,7 +5076,6 @@ function $11597ae03e703a47$var$RawSearchModalV2({
       input_el.setSelectionRange(start, end);
     }
   });
-  search_field.classList.add("in-modal");
   if (setSearchFieldOuterWidth_) {
     const resizeObserver = new ResizeObserver($gVhhF$depictaiutilishared.catchify(records => setSearchFieldOuterWidth_(records.at(-1).contentRect.width)));
     resizeObserver.observe(search_field);
@@ -12800,7 +12865,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
@@ -12882,7 +12947,7 @@ function $5cbaffcb5602e671$export$44f738469d5570cf({
         duration: closeDuration_,
         fill: "forwards",
         easing: "ease-out"
-      }).finished, submitButton_.animate([{
+      }).finished, submitButton_?.animate([{
         opacity: 0
       }, {
         opacity: 1

package/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.14";
+export const version = "4.4.0";
 declare const LISTING_ID = "listingId";
 declare const EXTERNAL_ID = "externalId";
 type ScrollRestorationData = {

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.3.14";
+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++) {
@@ -3324,9 +3324,12 @@ let $f86ba724282f6690$export$44dad306455dddf;
   DEPICT_ID["PLP_CATEGORY"] = "depict-plp-category";
 })($f86ba724282f6690$export$44dad306455dddf || ($f86ba724282f6690$export$44dad306455dddf = {}));
 var $5285d2814d0fac0c$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<button class=back type=button>`),
-  $5285d2814d0fac0c$var$_tmpl$2 = /*#__PURE__*/$9HbP8$template(`<div class=search-field role=search><!$><!/><div class=field><input class=query tabindex=0><button type=button class=clear></button></div><button class="submit major"type=button>`);
+  $5285d2814d0fac0c$var$_tmpl$2 = /*#__PURE__*/$9HbP8$template(`<button type=button class=clear>`),
+  $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 class=search-field role=search><!$><!/><!$><!/><div class=field><!$><!/><input class=query tabindex=0><!$><!/></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_,
@@ -3351,30 +3354,102 @@ function $5285d2814d0fac0c$export$b94867ecbd698f21({
   })); // focus field on render
   const owner_of_field_element = $9HbP8$getOwner();
   const isNewModal = BackIcon_[(0, $66db7a014e20802e$export$1ea76ea778b880dd)] === 2;
+  const [backButtonWidthAccessor, setBackButtonWidthAccessor] = $9HbP8$createSignal();
+  const getBackButtonWidth = () => backButtonWidthAccessor()?.();
+  const searchFieldEmpty = $9HbP8$createMemo(() => !searchFieldValue());
+  const BackButton = () => $9HbP8$createComponent((0, $9HbP8$Show), {
+    when: on_back_,
+    get children() {
+      var _el$ = $9HbP8$getNextElement($5285d2814d0fac0c$var$_tmpl$);
+      $9HbP8$spread(_el$, $9HbP8$mergeProps({
+        get onClick() {
+          return $9HbP8$catchify(on_back_);
+        },
+        get ["aria-label"]() {
+          return i18n_.back_();
+        }
+      }, isNewModal && {
+        ref: el => {
+          setBackButtonWidthAccessor(() => $2449872a62a75a20$export$ebdc3711f7e02ccd(el));
+          $9HbP8$onCleanup(() => setBackButtonWidthAccessor());
+        }
+      }), false, true);
+      $9HbP8$insert(_el$, isNewModal ? $9HbP8$createComponent((0, $19976a74d273070d$export$3b621d86b1566b2), {}) : $9HbP8$createComponent(BackIcon_, {}));
+      $9HbP8$runHydrationEvents();
+      return _el$;
+    }
+  });
+  const ClearButton = () => (() => {
+    var _el$2 = $9HbP8$getNextElement($5285d2814d0fac0c$var$_tmpl$2);
+    $9HbP8$spread(_el$2, $9HbP8$mergeProps({
+      get classList() {
+        return {
+          empty: searchFieldEmpty()
+        };
+      },
+      get style() {
+        return isNewModal || !searchFieldEmpty() ? "" : "display: none";
+      },
+      get onClick() {
+        return $9HbP8$catchify(() => {
+          if (isNewModal && searchFieldEmpty()) return;
+          setSearchFieldValue("");
+          clear_filters_(true);
+          if (!disabled_) input_element.focus();
+        });
+      }
+    }, () => searchFieldEmpty() ? {
+      "aria-hidden": "true"
+    } : {
+      title: i18n_.clear_filters_query_sorting_after_submit_()
+    }), false, true);
+    $9HbP8$insert(_el$2, isNewModal ? $9HbP8$createComponent((0, $9HbP8$Show), {
+      get when() {
+        return !searchFieldEmpty();
+      },
+      get fallback() {
+        return $9HbP8$createComponent((0, $16f0ed5ea30d8d9c$export$82eafebb825fc23f), {});
+      },
+      get children() {
+        return $9HbP8$createComponent(BackIcon_, {});
+      }
+    }) : $9HbP8$createComponent((0, $19976a74d273070d$export$3b621d86b1566b2), {}));
+    $9HbP8$runHydrationEvents();
+    return _el$2;
+  })();
   return (() => {
-    var _el$ = $9HbP8$getNextElement($5285d2814d0fac0c$var$_tmpl$2),
-      _el$7 = _el$.firstChild,
+    var _el$3 = $9HbP8$getNextElement($5285d2814d0fac0c$var$_tmpl$5),
+      _el$12 = _el$3.firstChild,
+      [_el$13, _co$3] = $9HbP8$getNextMarker(_el$12.nextSibling),
+      _el$14 = _el$13.nextSibling,
+      [_el$15, _co$4] = $9HbP8$getNextMarker(_el$14.nextSibling),
+      _el$5 = _el$15.nextSibling,
+      _el$7 = _el$5.firstChild,
       [_el$8, _co$] = $9HbP8$getNextMarker(_el$7.nextSibling),
-      _el$3 = _el$8.nextSibling,
-      _el$4 = _el$3.firstChild,
-      _el$5 = _el$4.nextSibling,
-      _el$6 = _el$3.nextSibling;
-    $9HbP8$insert(_el$, $9HbP8$createComponent((0, $9HbP8$Show), {
-      when: on_back_,
+      _el$6 = _el$8.nextSibling,
+      _el$9 = _el$6.nextSibling,
+      [_el$10, _co$2] = $9HbP8$getNextMarker(_el$9.nextSibling),
+      _el$16 = _el$5.nextSibling,
+      [_el$17, _co$5] = $9HbP8$getNextMarker(_el$16.nextSibling),
+      _el$18 = _el$17.nextSibling,
+      [_el$19, _co$6] = $9HbP8$getNextMarker(_el$18.nextSibling);
+    _el$3.classList.toggle("in-modal", !!!!on_back_);
+    $9HbP8$insert(_el$3, $9HbP8$createComponent((0, $9HbP8$Show), {
+      get when() {
+        return getBackButtonWidth() !== undefined && on_back_;
+      },
       get children() {
-        var _el$2 = $9HbP8$getNextElement($5285d2814d0fac0c$var$_tmpl$);
-        $9HbP8$addEventListener(_el$2, "click", $9HbP8$catchify(on_back_), true);
-        $9HbP8$insert(_el$2, $9HbP8$createComponent(BackIcon_, {}));
-        $9HbP8$effect(() => $9HbP8$setAttribute(_el$2, "aria-label", i18n_.back_()));
-        $9HbP8$runHydrationEvents();
-        return _el$2;
+        var _el$4 = $9HbP8$getNextElement($5285d2814d0fac0c$var$_tmpl$3);
+        $9HbP8$effect(() => (getBackButtonWidth(), _el$4.style.setProperty("width", getBackButtonWidth() + "px")));
+        return _el$4;
       }
-    }), _el$8, _co$);
+    }), _el$13, _co$3);
+    $9HbP8$insert(_el$3, !isNewModal && $9HbP8$createComponent(BackButton, {}), _el$15, _co$4);
     $9HbP8$use(el => {
       field_div = el;
       field_element_ref_?.(el);
-    }, _el$3);
-    $9HbP8$addEventListener(_el$3, "click", $9HbP8$catchify(({
+    }, _el$5);
+    $9HbP8$addEventListener(_el$5, "click", $9HbP8$catchify(({
       target: target,
       currentTarget: currentTarget,
       detail: detail
@@ -3398,7 +3473,8 @@ function $5285d2814d0fac0c$export$b94867ecbd698f21({
         }
       }
     }), true);
-    _el$4.$$pointerdown = ({
+    $9HbP8$insert(_el$5, isNewModal && $9HbP8$createComponent(ClearButton, {}), _el$8, _co$);
+    _el$6.$$pointerdown = ({
       pointerType: pointerType
     }) => {
       // When selecting text with a mouse we want a SearchField to be focussed even when releasing the mouse outside the .field element (we assume the event listener which opens the modal is attached to that).
@@ -3416,7 +3492,7 @@ function $5285d2814d0fac0c$export$b94867ecbd698f21({
         $9HbP8$runWithOwner(owner_of_field_element, () => $9HbP8$onCleanup(() => window.removeEventListener("pointerup", handler)));
       }
     };
-    $9HbP8$addEventListener(_el$4, "select", $9HbP8$catchify(() => {
+    $9HbP8$addEventListener(_el$6, "select", $9HbP8$catchify(() => {
       if (disabled_)
         // just in case. The field not actually being disabled when being disabled_ is so that you can focus it and open the modal. We don't want any of the other input-field-interaction features to work
         return;
@@ -3428,14 +3504,14 @@ function $5285d2814d0fac0c$export$b94867ecbd698f21({
           once: true
         });
     }));
-    $9HbP8$addEventListener(_el$4, "input", $9HbP8$catchify(() => {
+    $9HbP8$addEventListener(_el$6, "input", $9HbP8$catchify(() => {
       const {
         value: value
       } = input_element;
       if (!disabled_ && !value.length) clear_filters_(false); // if the user clears the whole field, reset filters on next submit
-      search_field_value_[1](value);
+      setSearchFieldValue(value);
     }), true);
-    $9HbP8$addEventListener(_el$4, "keydown", $9HbP8$catchify(e => {
+    $9HbP8$addEventListener(_el$6, "keydown", $9HbP8$catchify(e => {
       if (disabled_) {
         if (e.key !== "Tab" && e.key !== "Shift")
           // 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
@@ -3449,45 +3525,36 @@ function $5285d2814d0fac0c$export$b94867ecbd698f21({
       input_element = el;
       input_field_ref_?.(el);
     });
-    typeof _ref$ === "function" && $9HbP8$use(_ref$, _el$4);
-    _el$4.classList.toggle("has-adjacent-back-button", !!!!on_back_);
-    $9HbP8$addEventListener(_el$5, "click", $9HbP8$catchify(() => {
-      search_field_value_[1]("");
-      clear_filters_(true);
-      if (!disabled_) input_element.focus();
-    }), true);
-    $9HbP8$insert(_el$5, $9HbP8$createComponent((0, $19976a74d273070d$export$3b621d86b1566b2), {}));
-    var _ref$2 = submit_button_ref_;
-    typeof _ref$2 === "function" ? $9HbP8$use(_ref$2, _el$6) : submit_button_ref_ = _el$6;
-    $9HbP8$spread(_el$6, $9HbP8$mergeProps({
-      get onClick() {
-        return $9HbP8$catchify(() => submit_query_());
+    typeof _ref$ === "function" && $9HbP8$use(_ref$, _el$6);
+    _el$6.classList.toggle("has-adjacent-back-button", !!!!on_back_);
+    $9HbP8$insert(_el$5, !isNewModal && $9HbP8$createComponent(ClearButton, {}), _el$10, _co$2);
+    $9HbP8$insert(_el$3, isNewModal && $9HbP8$createComponent(BackButton, {}), _el$17, _co$5);
+    $9HbP8$insert(_el$3, $9HbP8$createComponent((0, $9HbP8$Show), {
+      when: !isNewModal,
+      get children() {
+        var _el$11 = $9HbP8$getNextElement($5285d2814d0fac0c$var$_tmpl$4);
+        $9HbP8$addEventListener(_el$11, "click", $9HbP8$catchify(() => submit_query_()), true);
+        var _ref$2 = submit_button_ref_;
+        typeof _ref$2 === "function" ? $9HbP8$use(_ref$2, _el$11) : submit_button_ref_ = _el$11;
+        $9HbP8$insert(_el$11, $9HbP8$createComponent((0, $16f0ed5ea30d8d9c$export$82eafebb825fc23f), {}));
+        $9HbP8$effect(() => $9HbP8$setAttribute(_el$11, "aria-label", i18n_.search_submit_button_aria_label_()));
+        $9HbP8$runHydrationEvents();
+        return _el$11;
       }
-    }, () => isNewModal ? {
-      tabindex: "-1"
-    } : {
-      "aria-label": i18n_.search_submit_button_aria_label_()
-    }), false, true);
-    $9HbP8$insert(_el$6, $9HbP8$createComponent((0, $16f0ed5ea30d8d9c$export$82eafebb825fc23f), {}));
+    }), _el$19, _co$6);
     $9HbP8$effect(_p$ => {
       var _v$ = i18n_.search_field_field_aria_label_(),
-        _v$2 = i18n_.placeholder_text_(),
-        _v$3 = i18n_.clear_filters_query_sorting_after_submit_(),
-        _v$4 = $9HbP8$createMemo(() => search_field_value_[0]() ? "" : "display: none")();
-      _v$ !== _p$.e && $9HbP8$setAttribute(_el$4, "aria-label", _p$.e = _v$);
-      _v$2 !== _p$.t && $9HbP8$setAttribute(_el$4, "placeholder", _p$.t = _v$2);
-      _v$3 !== _p$.a && $9HbP8$setAttribute(_el$5, "title", _p$.a = _v$3);
-      _p$.o = $9HbP8$style(_el$5, _v$4, _p$.o);
+        _v$2 = i18n_.placeholder_text_();
+      _v$ !== _p$.e && $9HbP8$setAttribute(_el$6, "aria-label", _p$.e = _v$);
+      _v$2 !== _p$.t && $9HbP8$setAttribute(_el$6, "placeholder", _p$.t = _v$2);
       return _p$;
     }, {
       e: undefined,
-      t: undefined,
-      a: undefined,
-      o: undefined
+      t: undefined
     });
-    $9HbP8$effect(() => $9HbP8$setProperty(_el$4, "value", search_field_value_[0]()));
+    $9HbP8$effect(() => $9HbP8$setProperty(_el$6, "value", searchFieldValue()));
     $9HbP8$runHydrationEvents();
-    return _el$;
+    return _el$3;
   })();
 }
 $9HbP8$delegateEvents(["click", "keydown", "input", "pointerdown"]);
@@ -3667,7 +3734,7 @@ function $42912431795f188e$var$RawClassicSearchModal({
     };
   });
   const search_field = $5285d2814d0fac0c$export$b94867ecbd698f21({
-    BackIcon_: () => $9HbP8$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_,
@@ -3683,7 +3750,6 @@ function $42912431795f188e$var$RawClassicSearchModal({
       input_el.setSelectionRange(start, end);
     }
   });
-  search_field.classList.add("in-modal");
   const modal_element = (() => {
     var _el$4 = $9HbP8$getNextElement($42912431795f188e$var$_tmpl$3),
       _el$5 = _el$4.firstChild,
@@ -4907,7 +4973,7 @@ function $500a16dd18ee5a71$var$RawSearchModalV2({
     return _el$7;
   })();
   const search_field = $5285d2814d0fac0c$export$b94867ecbd698f21({
-    BackIcon_: () => $9HbP8$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_,
@@ -4923,7 +4989,6 @@ function $500a16dd18ee5a71$var$RawSearchModalV2({
       input_el.setSelectionRange(start, end);
     }
   });
-  search_field.classList.add("in-modal");
   if (setSearchFieldOuterWidth_) {
     const resizeObserver = new ResizeObserver($9HbP8$catchify(records => setSearchFieldOuterWidth_(records.at(-1).contentRect.width)));
     resizeObserver.observe(search_field);
@@ -12713,7 +12778,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
@@ -12795,7 +12860,7 @@ function $0e562a5b247b1fc2$export$44f738469d5570cf({
         duration: closeDuration_,
         fill: "forwards",
         easing: "ease-out"
-      }).finished, submitButton_.animate([{
+      }).finished, submitButton_?.animate([{
         opacity: 0
       }, {
         opacity: 1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depict-ai/ui",
-  "version": "4.3.14",
+  "version": "4.4.0",
   "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,7 +236,7 @@
     "@babel/plugin-transform-typescript": "^7.22.9",
     "@babel/runtime": "latest",
     "@babel/runtime-corejs3": "^7.22.6",
-    "@depict-ai/plp-styling": "^4.0.4",
+    "@depict-ai/plp-styling": "^4.1.0",
     "@depict-ai/types": "^5.1.2",
     "@depict-ai/utilishared": "^2.1.2",
     "solid-js": "^1.8.12"