@depict-ai/ui 4.3.14 → 4.4.1

package/ES10/index.js

@@ -10,7 +10,7 @@ import { createStore as $8tj43$createStore, reconcile as $8tj43$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.14";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "4.4.1";
 const $a9c7ba6087881ac2$var$transform_elements = sorted_cols_at_size => {
   const cols_at_size = [];
   for (let i = 0; i < sorted_cols_at_size.length; i++) {
@@ -3511,10 +3511,13 @@ let $c3820807ac1e6fd7$export$44dad306455dddf;
   DEPICT_ID["PLP_CATEGORY"] = "depict-plp-category";
 })($c3820807ac1e6fd7$export$44dad306455dddf || ($c3820807ac1e6fd7$export$44dad306455dddf = {}));
 var $584c06c09cf4609d$var$_tmpl$ = /*#__PURE__*/$8tj43$template(`<button class=back type=button>`),
-  $584c06c09cf4609d$var$_tmpl$2 = /*#__PURE__*/$8tj43$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>`);
+  $584c06c09cf4609d$var$_tmpl$2 = /*#__PURE__*/$8tj43$template(`<button type=button class=clear>`),
+  $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 class=search-field role=search><!$><!/><!$><!/><div class=field><!$><!/><input class=query tabindex=0><!$><!/></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_,
@@ -3525,7 +3528,7 @@ function $584c06c09cf4609d$export$b94867ecbd698f21(_ref) {
     i18n_: i18n_,
     after_focusing_: after_focusing_,
     BackIcon_: BackIcon_,
-    submit_button_ref_: submit_button_ref_
+    buttonInFieldRef_: buttonInFieldRef_
   } = _ref;
   let input_element;
   // This is the div where we recommend (and ourselves do) attach the event listener to that opens the search modal.
@@ -3539,30 +3542,107 @@ function $584c06c09cf4609d$export$b94867ecbd698f21(_ref) {
   })); // focus field on render
   const owner_of_field_element = $8tj43$getOwner();
   const isNewModal = BackIcon_[(0, $b026fa9c9c904a98$export$1ea76ea778b880dd)] === 2;
+  const [backButtonWidthAccessor, setBackButtonWidthAccessor] = $8tj43$createSignal();
+  const getBackButtonWidth = () => {
+    var _backButtonWidthAcces;
+    return (_backButtonWidthAcces = backButtonWidthAccessor()) === null || _backButtonWidthAcces === void 0 ? void 0 : _backButtonWidthAcces();
+  };
+  const searchFieldEmpty = $8tj43$createMemo(() => !searchFieldValue());
+  const BackButton = () => $8tj43$createComponent((0, $8tj43$Show), {
+    when: on_back_,
+    get children() {
+      var _el$ = $8tj43$getNextElement($584c06c09cf4609d$var$_tmpl$);
+      $8tj43$spread(_el$, $8tj43$mergeProps({
+        get onClick() {
+          return $8tj43$catchify(on_back_);
+        },
+        get ["aria-label"]() {
+          return i18n_.back_();
+        }
+      }, isNewModal && {
+        ref: el => {
+          setBackButtonWidthAccessor(() => $fc830a7ee59416ef$export$ebdc3711f7e02ccd(el));
+          $8tj43$onCleanup(() => setBackButtonWidthAccessor());
+        }
+      }), false, true);
+      $8tj43$insert(_el$, isNewModal ? $8tj43$createComponent((0, $9783d437ad61594c$export$3b621d86b1566b2), {}) : $8tj43$createComponent(BackIcon_, {}));
+      $8tj43$runHydrationEvents();
+      return _el$;
+    }
+  });
+  const ClearButton = () => (() => {
+    var _el$2 = $8tj43$getNextElement($584c06c09cf4609d$var$_tmpl$2);
+    var _ref$ = buttonInFieldRef_;
+    typeof _ref$ === "function" ? $8tj43$use(_ref$, _el$2) : buttonInFieldRef_ = _el$2;
+    $8tj43$spread(_el$2, $8tj43$mergeProps({
+      get classList() {
+        return {
+          empty: searchFieldEmpty()
+        };
+      },
+      get style() {
+        return isNewModal || !searchFieldEmpty() ? "" : "display: none";
+      },
+      get onClick() {
+        return $8tj43$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);
+    $8tj43$insert(_el$2, isNewModal ? $8tj43$createComponent((0, $8tj43$Show), {
+      get when() {
+        return !searchFieldEmpty();
+      },
+      get fallback() {
+        return $8tj43$createComponent((0, $ef0f18a578b32578$export$82eafebb825fc23f), {});
+      },
+      get children() {
+        return $8tj43$createComponent(BackIcon_, {});
+      }
+    }) : $8tj43$createComponent((0, $9783d437ad61594c$export$3b621d86b1566b2), {}));
+    $8tj43$runHydrationEvents();
+    return _el$2;
+  })();
   return (() => {
-    var _el$ = $8tj43$getNextElement($584c06c09cf4609d$var$_tmpl$2),
-      _el$7 = _el$.firstChild,
+    var _el$3 = $8tj43$getNextElement($584c06c09cf4609d$var$_tmpl$5),
+      _el$12 = _el$3.firstChild,
+      [_el$13, _co$3] = $8tj43$getNextMarker(_el$12.nextSibling),
+      _el$14 = _el$13.nextSibling,
+      [_el$15, _co$4] = $8tj43$getNextMarker(_el$14.nextSibling),
+      _el$5 = _el$15.nextSibling,
+      _el$7 = _el$5.firstChild,
       [_el$8, _co$] = $8tj43$getNextMarker(_el$7.nextSibling),
-      _el$3 = _el$8.nextSibling,
-      _el$4 = _el$3.firstChild,
-      _el$5 = _el$4.nextSibling,
-      _el$6 = _el$3.nextSibling;
-    $8tj43$insert(_el$, $8tj43$createComponent((0, $8tj43$Show), {
-      when: on_back_,
+      _el$6 = _el$8.nextSibling,
+      _el$9 = _el$6.nextSibling,
+      [_el$10, _co$2] = $8tj43$getNextMarker(_el$9.nextSibling),
+      _el$16 = _el$5.nextSibling,
+      [_el$17, _co$5] = $8tj43$getNextMarker(_el$16.nextSibling),
+      _el$18 = _el$17.nextSibling,
+      [_el$19, _co$6] = $8tj43$getNextMarker(_el$18.nextSibling);
+    _el$3.classList.toggle("in-modal", !!!!on_back_);
+    $8tj43$insert(_el$3, $8tj43$createComponent((0, $8tj43$Show), {
+      get when() {
+        return getBackButtonWidth() !== undefined && on_back_;
+      },
       get children() {
-        var _el$2 = $8tj43$getNextElement($584c06c09cf4609d$var$_tmpl$);
-        $8tj43$addEventListener(_el$2, "click", $8tj43$catchify(on_back_), true);
-        $8tj43$insert(_el$2, $8tj43$createComponent(BackIcon_, {}));
-        $8tj43$effect(() => $8tj43$setAttribute(_el$2, "aria-label", i18n_.back_()));
-        $8tj43$runHydrationEvents();
-        return _el$2;
+        var _el$4 = $8tj43$getNextElement($584c06c09cf4609d$var$_tmpl$3);
+        $8tj43$effect(() => (getBackButtonWidth(), _el$4.style.setProperty("width", getBackButtonWidth() + "px")));
+        return _el$4;
       }
-    }), _el$8, _co$);
+    }), _el$13, _co$3);
+    $8tj43$insert(_el$3, !isNewModal && $8tj43$createComponent(BackButton, {}), _el$15, _co$4);
     $8tj43$use(el => {
       field_div = el;
       field_element_ref_ === null || field_element_ref_ === void 0 || field_element_ref_(el);
-    }, _el$3);
-    $8tj43$addEventListener(_el$3, "click", $8tj43$catchify(_ref2 => {
+    }, _el$5);
+    $8tj43$addEventListener(_el$5, "click", $8tj43$catchify(_ref2 => {
       let {
         target: target,
         currentTarget: currentTarget,
@@ -3587,7 +3667,8 @@ function $584c06c09cf4609d$export$b94867ecbd698f21(_ref) {
         }
       }
     }), true);
-    _el$4.$$pointerdown = _ref3 => {
+    $8tj43$insert(_el$5, isNewModal && $8tj43$createComponent(ClearButton, {}), _el$8, _co$);
+    _el$6.$$pointerdown = _ref3 => {
       let {
         pointerType: pointerType
       } = _ref3;
@@ -3607,7 +3688,7 @@ function $584c06c09cf4609d$export$b94867ecbd698f21(_ref) {
         $8tj43$runWithOwner(owner_of_field_element, () => $8tj43$onCleanup(() => window.removeEventListener("pointerup", handler)));
       }
     };
-    $8tj43$addEventListener(_el$4, "select", $8tj43$catchify(() => {
+    $8tj43$addEventListener(_el$6, "select", $8tj43$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;
@@ -3619,14 +3700,14 @@ function $584c06c09cf4609d$export$b94867ecbd698f21(_ref) {
           once: true
         });
     }));
-    $8tj43$addEventListener(_el$4, "input", $8tj43$catchify(() => {
+    $8tj43$addEventListener(_el$6, "input", $8tj43$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);
-    $8tj43$addEventListener(_el$4, "keydown", $8tj43$catchify(e => {
+    $8tj43$addEventListener(_el$6, "keydown", $8tj43$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
@@ -3636,49 +3717,38 @@ function $584c06c09cf4609d$export$b94867ecbd698f21(_ref) {
         if (!dont_submit) submit_query_();
       }
     }), true);
-    var _ref$ = $8tj43$catchify(el => {
+    var _ref$2 = $8tj43$catchify(el => {
       input_element = el;
       input_field_ref_ === null || input_field_ref_ === void 0 || input_field_ref_(el);
     });
-    typeof _ref$ === "function" && $8tj43$use(_ref$, _el$4);
-    _el$4.classList.toggle("has-adjacent-back-button", !!!!on_back_);
-    $8tj43$addEventListener(_el$5, "click", $8tj43$catchify(() => {
-      search_field_value_[1]("");
-      clear_filters_(true);
-      if (!disabled_) input_element.focus();
-    }), true);
-    $8tj43$insert(_el$5, $8tj43$createComponent((0, $9783d437ad61594c$export$3b621d86b1566b2), {}));
-    var _ref$2 = submit_button_ref_;
-    typeof _ref$2 === "function" ? $8tj43$use(_ref$2, _el$6) : submit_button_ref_ = _el$6;
-    $8tj43$spread(_el$6, $8tj43$mergeProps({
-      get onClick() {
-        return $8tj43$catchify(() => submit_query_());
+    typeof _ref$2 === "function" && $8tj43$use(_ref$2, _el$6);
+    _el$6.classList.toggle("has-adjacent-back-button", !!!!on_back_);
+    $8tj43$insert(_el$5, !isNewModal && $8tj43$createComponent(ClearButton, {}), _el$10, _co$2);
+    $8tj43$insert(_el$3, isNewModal && $8tj43$createComponent(BackButton, {}), _el$17, _co$5);
+    $8tj43$insert(_el$3, $8tj43$createComponent((0, $8tj43$Show), {
+      when: !isNewModal,
+      get children() {
+        var _el$11 = $8tj43$getNextElement($584c06c09cf4609d$var$_tmpl$4);
+        $8tj43$addEventListener(_el$11, "click", $8tj43$catchify(() => submit_query_()), true);
+        $8tj43$insert(_el$11, $8tj43$createComponent((0, $ef0f18a578b32578$export$82eafebb825fc23f), {}));
+        $8tj43$effect(() => $8tj43$setAttribute(_el$11, "aria-label", i18n_.search_submit_button_aria_label_()));
+        $8tj43$runHydrationEvents();
+        return _el$11;
       }
-    }, () => isNewModal ? {
-      tabindex: "-1"
-    } : {
-      "aria-label": i18n_.search_submit_button_aria_label_()
-    }), false, true);
-    $8tj43$insert(_el$6, $8tj43$createComponent((0, $ef0f18a578b32578$export$82eafebb825fc23f), {}));
+    }), _el$19, _co$6);
     $8tj43$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 = $8tj43$createMemo(() => search_field_value_[0]() ? "" : "display: none")();
-      _v$ !== _p$.e && $8tj43$setAttribute(_el$4, "aria-label", _p$.e = _v$);
-      _v$2 !== _p$.t && $8tj43$setAttribute(_el$4, "placeholder", _p$.t = _v$2);
-      _v$3 !== _p$.a && $8tj43$setAttribute(_el$5, "title", _p$.a = _v$3);
-      _p$.o = $8tj43$style(_el$5, _v$4, _p$.o);
+        _v$2 = i18n_.placeholder_text_();
+      _v$ !== _p$.e && $8tj43$setAttribute(_el$6, "aria-label", _p$.e = _v$);
+      _v$2 !== _p$.t && $8tj43$setAttribute(_el$6, "placeholder", _p$.t = _v$2);
       return _p$;
     }, {
       e: undefined,
-      t: undefined,
-      a: undefined,
-      o: undefined
+      t: undefined
     });
-    $8tj43$effect(() => $8tj43$setProperty(_el$4, "value", search_field_value_[0]()));
+    $8tj43$effect(() => $8tj43$setProperty(_el$6, "value", searchFieldValue()));
     $8tj43$runHydrationEvents();
-    return _el$;
+    return _el$3;
   })();
 }
 $8tj43$delegateEvents(["click", "keydown", "input", "pointerdown"]);
@@ -3861,7 +3931,7 @@ function $40411f2ec772c376$var$RawClassicSearchModal(_ref) {
     };
   });
   const search_field = $584c06c09cf4609d$export$b94867ecbd698f21({
-    BackIcon_: () => $8tj43$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;
@@ -3880,7 +3950,6 @@ function $40411f2ec772c376$var$RawClassicSearchModal(_ref) {
       input_el.setSelectionRange(start, end);
     }
   });
-  search_field.classList.add("in-modal");
   const modal_element = (() => {
     var _el$4 = $8tj43$getNextElement($40411f2ec772c376$var$_tmpl$3),
       _el$5 = _el$4.firstChild,
@@ -5149,7 +5218,7 @@ function $06fcd2a345efd24d$var$RawSearchModalV2(_ref) {
     return _el$7;
   })();
   const search_field = $584c06c09cf4609d$export$b94867ecbd698f21({
-    BackIcon_: () => $8tj43$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;
@@ -5168,7 +5237,6 @@ function $06fcd2a345efd24d$var$RawSearchModalV2(_ref) {
       input_el.setSelectionRange(start, end);
     }
   });
-  search_field.classList.add("in-modal");
   if (setSearchFieldOuterWidth_) {
     const resizeObserver = new ResizeObserver($8tj43$catchify(records => setSearchFieldOuterWidth_(records.at(-1).contentRect.width)));
     resizeObserver.observe(search_field);
@@ -13454,7 +13522,7 @@ function $937791b86d3d1509$export$44f738469d5570cf(_ref) {
     bodyAlignmentSignal_: [, setBodyAlignment_],
     backdropStyleSignal_: [, setBackdropStyle_],
     setPollAlignment_: setPollAlignment_,
-    submitButton_: submitButton_,
+    buttonInField_: buttonInField_,
     modalSearchFieldOuterWidth_: modalSearchFieldOuterWidth_
   } = _ref;
   return $8tj43$createRoot(dispose => {
@@ -13501,7 +13569,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([{
+    if (pxOffCenter > 10) buttonInField_.animate([{
       opacity: 1
     }, {
       opacity: 0
@@ -13568,6 +13636,8 @@ function $937791b86d3d1509$export$44f738469d5570cf(_ref) {
         width: width,
         left: left
       } = fakeField.getBoundingClientRect();
+      // Just copy-pasted below line without thinking, it might be wrong
+      const pxOffCenter = Math.abs($8tj43$untrack(innerWidthReactive) / 2 - (left + width / 2));
       $d7833ca17fc05c5e$export$23d40cc5971c3acd({
         setBackdropStyle_: setBackdropStyle_,
         setBodyAlignment_: setBodyAlignment_,
@@ -13583,12 +13653,12 @@ function $937791b86d3d1509$export$44f738469d5570cf(_ref) {
         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]);
@@ -13808,7 +13878,7 @@ function $da279c5a540c6846$export$a54ec244c8863715(_ref) {
       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_,
@@ -13818,7 +13888,7 @@ function $da279c5a540c6846$export$a54ec244c8863715(_ref) {
         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({});
@@ -13853,7 +13923,7 @@ function $da279c5a540c6846$export$a54ec244c8863715(_ref) {
             bodyAlignmentSignal_: modal_body_style,
             backdropStyleSignal_: modal_backdrop_style,
             setPollAlignment_: setPollAlignment_,
-            submitButton_: submitButton_,
+            buttonInField_: buttonInField,
             modalSearchFieldOuterWidth_: modalSearchFieldOuterWidth_
           });
         }
@@ -14908,7 +14978,7 @@ function $a3026fb727bc7550$export$316f6f283ae64765(props) {
   const shared_properties = $eb064bc3350276c1$export$12fa711345994013(depict_search);
   return $83e8cf2c0b87a58a$export$23fca46f3143581f(() => {
     let input_element;
-    let submitButton_;
+    let buttonInField;
     const search_field = $8tj43$createComponent((0, $584c06c09cf4609d$export$b94867ecbd698f21), {
       get BackIcon_() {
         return shared_properties.BackIcon_;
@@ -14927,7 +14997,7 @@ function $a3026fb727bc7550$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_ = $8tj43$createSignal({
           position: "fixed"
@@ -14974,7 +15044,7 @@ function $a3026fb727bc7550$export$316f6f283ae64765(props) {
               bodyAlignmentSignal_: bodyAlignmentSignal_,
               backdropStyleSignal_: backdropAlignmentSignal_,
               setPollAlignment_: setPollAlignment_,
-              submitButton_: submitButton_,
+              buttonInField_: buttonInField,
               modalSearchFieldOuterWidth_: modalSearchFieldOuterWidth_
             });
           }