@depict-ai/ui 4.0.0 → 4.0.1

package/ES10/index.cjs

@@ -92,7 +92,7 @@ $parcel$export(module.exports, "defaultCategoryTitlePlugin", () => $33eed84f447a
 $parcel$export(module.exports, "version", () => $aa1938dec50d6c12$export$83d89fbfd8236492);
 $parcel$export(module.exports, "SearchField", () => $98aef9965764903d$export$316f6f283ae64765);
 /*! Depict.ai search and product listing SDK */
-const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.0.0";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.0.1";
 function $a28000bc10de28ad$export$e417c49320921907(dependency, fetcher) {
   const [promiseOfCurrentFetcherRun, setPromiseOfCurrentFetcherRun] = $52FdA$solidjs.createSignal();
   const deparallelizedFetcher = $52FdA$depictaiutilishared.deparallelize_no_drop(async dependencyValue => {
@@ -13479,11 +13479,22 @@ function $a60bc7692ce52705$export$44f738469d5570cf(_ref) {
     modalSearchFieldOuterWidth_: modalSearchFieldOuterWidth_
   } = _ref;
   return $52FdA$solidjs.createRoot(dispose => {
+    const [innerWidthReactive, setInnerWidthReactive] = $52FdA$solidjs.createSignal(innerWidth);
+    const resizeObserver = new ResizeObserver(records => setInnerWidthReactive(records.at(-1).contentRect.width));
+    const {
+      left: left,
+      top: top,
+      width: width
+    } = actualField_.getBoundingClientRect();
     const fakeField = makeFakeField_();
     const owner = $52FdA$solidjs.getOwner();
     const inModalFieldWidth = $52FdA$solidjs.createMemo(
     // Can't have `min(${modalSearchFieldOuterWidth_()}px, var(--field-max-width, 600px))` because the WAAPI doesn't support that, so we need ot calculate it in JS
-    () => Math.min(modalSearchFieldOuterWidth_(), parseFloat(getComputedStyle(actualField_).getPropertyValue("--field-max-width") || "600")) + "px");
+    () => Math.min(modalSearchFieldOuterWidth_(), parseFloat(getComputedStyle(actualField_).getPropertyValue("--field-max-width") || "600")));
+    const inModalFieldWidthPx = $52FdA$solidjs.createMemo(() => inModalFieldWidth() + "px");
+    let disableResizePollingTimeout;
+    resizeObserver.observe(document.documentElement);
+    $52FdA$solidjs.onCleanup(() => resizeObserver.disconnect());
     actualField_.replaceWith(fakeField);
     // Don't move the wrapped div since that would confuse run_in_root_or_auto_cleanup, but do actually move the field the user clicked around so that all selection stuff etc. is easier
     const addedToBody = wrap_ ? (() => {
@@ -13492,21 +13503,17 @@ function $a60bc7692ce52705$export$44f738469d5570cf(_ref) {
       return _el$;
     })() : actualField_;
     document.body.append(addedToBody);
-    const {
-      left: left,
-      top: top,
-      width: width
-    } = fakeField.getBoundingClientRect();
     const zIndexOfFake = getComputedStyle(fakeField).zIndex;
     Object.assign(addedToBody.style, {
       position: "fixed",
       top: top + "px",
+      left: left + "px",
       width: width + "px",
       ...(zIndexOfFake !== "auto" ? {
         zIndex: +zIndexOfFake + 1
       } : {})
     });
-    const pxOffCenter = innerWidth / 2 - (left + width / 2);
+    const pxOffCenter = $52FdA$solidjs.untrack(innerWidthReactive) / 2 - (left + width / 2);
     const openDuration = pxOffCenter > 100 ? 250 : 125; // faster animations if little left-right movement
     const closeDuration = pxOffCenter > 100 ? 150 : 100;
     setPollAlignment_(true);
@@ -13525,24 +13532,30 @@ function $a60bc7692ce52705$export$44f738469d5570cf(_ref) {
       // Wait until the ResizeObserver has delivered a value in case that the modal is small or has much padding so we know that we can't animate our fake field to be wider than that
       addedToBody.animate([{
         left: left + "px",
-        transform: "translateX(0%)",
         width: width + "px"
       }, {
-        left: "50%",
-        transform: "translateX(-50%)",
-        width: $52FdA$solidjs.untrack(inModalFieldWidth)
+        left: "".concat($52FdA$solidjs.untrack(innerWidthReactive) / 2 - $52FdA$solidjs.untrack(inModalFieldWidth) / 2, "px"),
+        width: $52FdA$solidjs.untrack(inModalFieldWidthPx)
       }], {
         duration: openDuration,
         easing: "ease-in"
       }).finished.then(() => {
         setPollAlignment_(false);
-        $52FdA$solidjs.runWithOwner(owner, () => $52FdA$solidjs.createEffect(() =>
-        // When animation has finished, still dynamically set the size of the search field behind in case the user resizes the window
-        Object.assign(addedToBody.style, {
-          left: "50%",
-          transform: "translateX(-50%)",
-          width: inModalFieldWidth()
-        })));
+        $52FdA$solidjs.runWithOwner(owner, () => $52FdA$solidjs.createEffect(() => {
+          // When animation has finished, still dynamically set the size of the search field behind in case the user resizes the window
+          Object.assign(addedToBody.style, {
+            // This is left: 50%, transform: translateX(-50) with extra steps but when using it safari and firefox glitch out like crazy
+            left: "".concat(innerWidthReactive() / 2 - inModalFieldWidth() / 2, "px"),
+            width: inModalFieldWidthPx()
+          });
+          // We might only have changed the left position which align_field doesn't know about, make it poll the position for a while
+          setPollAlignment_(true);
+          if (disableResizePollingTimeout) clearTimeout(disableResizePollingTimeout);
+          disableResizePollingTimeout = setTimeout($52FdA$depictaiutilishared.catchify(() => {
+            setPollAlignment_(false);
+            disableResizePollingTimeout = undefined;
+          }), 1000);
+        }));
       });
       return true;
     }, false);
@@ -13585,13 +13598,11 @@ function $a60bc7692ce52705$export$44f738469d5570cf(_ref) {
         transition: "opacity ".concat(closeDuration, "ms ease-out")
       }));
       await Promise.all([addedToBody.animate([{
-        width: $52FdA$solidjs.untrack(inModalFieldWidth),
-        left: "50%",
-        transform: "translateX(-50%)"
+        width: $52FdA$solidjs.untrack(inModalFieldWidthPx),
+        left: "".concat($52FdA$solidjs.untrack(innerWidthReactive) / 2 - $52FdA$solidjs.untrack(inModalFieldWidth) / 2, "px")
       }, {
         width: width + "px",
-        left: left + "px",
-        transform: "translateX(0%)"
+        left: left + "px"
       }], {
         duration: closeDuration,
         fill: "forwards",

package/ES10/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 _SearchFilter2 } from "@depict-ai/types/api/SearchRequestV2";
-export const version = "4.0.0";
+export const version = "4.0.1";
 export type ModalAlignmentSignals = {
   body_: Signal<JSX.CSSProperties>;
   field_: Signal<JSX.CSSProperties>;
@@ -642,7 +642,7 @@ export type BaseSearchProviderConfig<InputDisplay extends Display, PossibleTrans
    */
   enableContentSearch?: boolean;
   /**
-   * The search modal component to use. You can switch between the classic and the new search modal. Provide one of the components here that you can import from the same package as the one you're using to see this message.
+   * The search modal component to use. You can switch between the classic and the new search modal. Provide one of the components here that you can import from the same package as the one you're using to see this message (`SearchModalV2` or `ClassicSearchModal`).
    * You also need to reflect the choice in SCSS, example:
    * ```scss
    * @use "@depict-ai/js-ui" as plp-styling with (

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.0.0";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "4.0.1";
 function $a604a8ffa4e4c03f$export$e417c49320921907(dependency, fetcher) {
   const [promiseOfCurrentFetcherRun, setPromiseOfCurrentFetcherRun] = $8tj43$createSignal();
   const deparallelizedFetcher = $8tj43$deparallelize_no_drop(async dependencyValue => {
@@ -13397,11 +13397,22 @@ function $937791b86d3d1509$export$44f738469d5570cf(_ref) {
     modalSearchFieldOuterWidth_: modalSearchFieldOuterWidth_
   } = _ref;
   return $8tj43$createRoot(dispose => {
+    const [innerWidthReactive, setInnerWidthReactive] = $8tj43$createSignal(innerWidth);
+    const resizeObserver = new ResizeObserver(records => setInnerWidthReactive(records.at(-1).contentRect.width));
+    const {
+      left: left,
+      top: top,
+      width: width
+    } = actualField_.getBoundingClientRect();
     const fakeField = makeFakeField_();
     const owner = $8tj43$getOwner();
     const inModalFieldWidth = $8tj43$createMemo(
     // Can't have `min(${modalSearchFieldOuterWidth_()}px, var(--field-max-width, 600px))` because the WAAPI doesn't support that, so we need ot calculate it in JS
-    () => Math.min(modalSearchFieldOuterWidth_(), parseFloat(getComputedStyle(actualField_).getPropertyValue("--field-max-width") || "600")) + "px");
+    () => Math.min(modalSearchFieldOuterWidth_(), parseFloat(getComputedStyle(actualField_).getPropertyValue("--field-max-width") || "600")));
+    const inModalFieldWidthPx = $8tj43$createMemo(() => inModalFieldWidth() + "px");
+    let disableResizePollingTimeout;
+    resizeObserver.observe(document.documentElement);
+    $8tj43$onCleanup(() => resizeObserver.disconnect());
     actualField_.replaceWith(fakeField);
     // Don't move the wrapped div since that would confuse run_in_root_or_auto_cleanup, but do actually move the field the user clicked around so that all selection stuff etc. is easier
     const addedToBody = wrap_ ? (() => {
@@ -13410,21 +13421,17 @@ function $937791b86d3d1509$export$44f738469d5570cf(_ref) {
       return _el$;
     })() : actualField_;
     document.body.append(addedToBody);
-    const {
-      left: left,
-      top: top,
-      width: width
-    } = fakeField.getBoundingClientRect();
     const zIndexOfFake = getComputedStyle(fakeField).zIndex;
     Object.assign(addedToBody.style, {
       position: "fixed",
       top: top + "px",
+      left: left + "px",
       width: width + "px",
       ...(zIndexOfFake !== "auto" ? {
         zIndex: +zIndexOfFake + 1
       } : {})
     });
-    const pxOffCenter = innerWidth / 2 - (left + width / 2);
+    const pxOffCenter = $8tj43$untrack(innerWidthReactive) / 2 - (left + width / 2);
     const openDuration = pxOffCenter > 100 ? 250 : 125; // faster animations if little left-right movement
     const closeDuration = pxOffCenter > 100 ? 150 : 100;
     setPollAlignment_(true);
@@ -13443,24 +13450,30 @@ function $937791b86d3d1509$export$44f738469d5570cf(_ref) {
       // Wait until the ResizeObserver has delivered a value in case that the modal is small or has much padding so we know that we can't animate our fake field to be wider than that
       addedToBody.animate([{
         left: left + "px",
-        transform: "translateX(0%)",
         width: width + "px"
       }, {
-        left: "50%",
-        transform: "translateX(-50%)",
-        width: $8tj43$untrack(inModalFieldWidth)
+        left: "".concat($8tj43$untrack(innerWidthReactive) / 2 - $8tj43$untrack(inModalFieldWidth) / 2, "px"),
+        width: $8tj43$untrack(inModalFieldWidthPx)
       }], {
         duration: openDuration,
         easing: "ease-in"
       }).finished.then(() => {
         setPollAlignment_(false);
-        $8tj43$runWithOwner(owner, () => $8tj43$createEffect(() =>
-        // When animation has finished, still dynamically set the size of the search field behind in case the user resizes the window
-        Object.assign(addedToBody.style, {
-          left: "50%",
-          transform: "translateX(-50%)",
-          width: inModalFieldWidth()
-        })));
+        $8tj43$runWithOwner(owner, () => $8tj43$createEffect(() => {
+          // When animation has finished, still dynamically set the size of the search field behind in case the user resizes the window
+          Object.assign(addedToBody.style, {
+            // This is left: 50%, transform: translateX(-50) with extra steps but when using it safari and firefox glitch out like crazy
+            left: "".concat(innerWidthReactive() / 2 - inModalFieldWidth() / 2, "px"),
+            width: inModalFieldWidthPx()
+          });
+          // We might only have changed the left position which align_field doesn't know about, make it poll the position for a while
+          setPollAlignment_(true);
+          if (disableResizePollingTimeout) clearTimeout(disableResizePollingTimeout);
+          disableResizePollingTimeout = setTimeout($8tj43$catchify(() => {
+            setPollAlignment_(false);
+            disableResizePollingTimeout = undefined;
+          }), 1000);
+        }));
       });
       return true;
     }, false);
@@ -13503,13 +13516,11 @@ function $937791b86d3d1509$export$44f738469d5570cf(_ref) {
         transition: "opacity ".concat(closeDuration, "ms ease-out")
       }));
       await Promise.all([addedToBody.animate([{
-        width: $8tj43$untrack(inModalFieldWidth),
-        left: "50%",
-        transform: "translateX(-50%)"
+        width: $8tj43$untrack(inModalFieldWidthPx),
+        left: "".concat($8tj43$untrack(innerWidthReactive) / 2 - $8tj43$untrack(inModalFieldWidth) / 2, "px")
       }, {
         width: width + "px",
-        left: left + "px",
-        transform: "translateX(0%)"
+        left: left + "px"
       }], {
         duration: closeDuration,
         fill: "forwards",

package/latest/index.cjs

@@ -86,7 +86,7 @@ $parcel$export(module.exports, "defaultCategoryTitlePlugin", () => $a3280f0aad99
 $parcel$export(module.exports, "version", () => $b757f75811f3261f$export$83d89fbfd8236492);
 $parcel$export(module.exports, "SearchField", () => $c0a0659cf97e8eb2$export$316f6f283ae64765);
 /*! Depict.ai search and product listing SDK */
-const $b757f75811f3261f$export$83d89fbfd8236492 = "4.0.0";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "4.0.1";
 function $53df95e470b2f8d2$export$e417c49320921907(dependency, fetcher) {
   const [promiseOfCurrentFetcherRun, setPromiseOfCurrentFetcherRun] = $gVhhF$solidjs.createSignal();
   const deparallelizedFetcher = $gVhhF$depictaiutilishared.deparallelize_no_drop(async dependencyValue => {
@@ -12658,11 +12658,22 @@ function $5cbaffcb5602e671$export$44f738469d5570cf({
   modalSearchFieldOuterWidth_: modalSearchFieldOuterWidth_
 }) {
   return $gVhhF$solidjs.createRoot(dispose => {
+    const [innerWidthReactive, setInnerWidthReactive] = $gVhhF$solidjs.createSignal(innerWidth);
+    const resizeObserver = new ResizeObserver(records => setInnerWidthReactive(records.at(-1).contentRect.width));
+    const {
+      left: left,
+      top: top,
+      width: width
+    } = actualField_.getBoundingClientRect();
     const fakeField = makeFakeField_();
     const owner = $gVhhF$solidjs.getOwner();
     const inModalFieldWidth = $gVhhF$solidjs.createMemo(
     // Can't have `min(${modalSearchFieldOuterWidth_()}px, var(--field-max-width, 600px))` because the WAAPI doesn't support that, so we need ot calculate it in JS
-    () => Math.min(modalSearchFieldOuterWidth_(), parseFloat(getComputedStyle(actualField_).getPropertyValue("--field-max-width") || "600")) + "px");
+    () => Math.min(modalSearchFieldOuterWidth_(), parseFloat(getComputedStyle(actualField_).getPropertyValue("--field-max-width") || "600")));
+    const inModalFieldWidthPx = $gVhhF$solidjs.createMemo(() => inModalFieldWidth() + "px");
+    let disableResizePollingTimeout;
+    resizeObserver.observe(document.documentElement);
+    $gVhhF$solidjs.onCleanup(() => resizeObserver.disconnect());
     actualField_.replaceWith(fakeField);
     // Don't move the wrapped div since that would confuse run_in_root_or_auto_cleanup, but do actually move the field the user clicked around so that all selection stuff etc. is easier
     const addedToBody = wrap_ ? (() => {
@@ -12671,21 +12682,17 @@ function $5cbaffcb5602e671$export$44f738469d5570cf({
       return _el$;
     })() : actualField_;
     document.body.append(addedToBody);
-    const {
-      left: left,
-      top: top,
-      width: width
-    } = fakeField.getBoundingClientRect();
     const zIndexOfFake = getComputedStyle(fakeField).zIndex;
     Object.assign(addedToBody.style, {
       position: "fixed",
       top: top + "px",
+      left: left + "px",
       width: width + "px",
       ...(zIndexOfFake !== "auto" ? {
         zIndex: +zIndexOfFake + 1
       } : {})
     });
-    const pxOffCenter = innerWidth / 2 - (left + width / 2);
+    const pxOffCenter = $gVhhF$solidjs.untrack(innerWidthReactive) / 2 - (left + width / 2);
     const openDuration = pxOffCenter > 100 ? 250 : 125; // faster animations if little left-right movement
     const closeDuration = pxOffCenter > 100 ? 150 : 100;
     setPollAlignment_(true);
@@ -12704,24 +12711,30 @@ function $5cbaffcb5602e671$export$44f738469d5570cf({
       // Wait until the ResizeObserver has delivered a value in case that the modal is small or has much padding so we know that we can't animate our fake field to be wider than that
       addedToBody.animate([{
         left: left + "px",
-        transform: "translateX(0%)",
         width: width + "px"
       }, {
-        left: "50%",
-        transform: "translateX(-50%)",
-        width: $gVhhF$solidjs.untrack(inModalFieldWidth)
+        left: `${$gVhhF$solidjs.untrack(innerWidthReactive) / 2 - $gVhhF$solidjs.untrack(inModalFieldWidth) / 2}px`,
+        width: $gVhhF$solidjs.untrack(inModalFieldWidthPx)
       }], {
         duration: openDuration,
         easing: "ease-in"
       }).finished.then(() => {
         setPollAlignment_(false);
-        $gVhhF$solidjs.runWithOwner(owner, () => $gVhhF$solidjs.createEffect(() =>
-        // When animation has finished, still dynamically set the size of the search field behind in case the user resizes the window
-        Object.assign(addedToBody.style, {
-          left: "50%",
-          transform: "translateX(-50%)",
-          width: inModalFieldWidth()
-        })));
+        $gVhhF$solidjs.runWithOwner(owner, () => $gVhhF$solidjs.createEffect(() => {
+          // When animation has finished, still dynamically set the size of the search field behind in case the user resizes the window
+          Object.assign(addedToBody.style, {
+            // This is left: 50%, transform: translateX(-50) with extra steps but when using it safari and firefox glitch out like crazy
+            left: `${innerWidthReactive() / 2 - inModalFieldWidth() / 2}px`,
+            width: inModalFieldWidthPx()
+          });
+          // We might only have changed the left position which align_field doesn't know about, make it poll the position for a while
+          setPollAlignment_(true);
+          if (disableResizePollingTimeout) clearTimeout(disableResizePollingTimeout);
+          disableResizePollingTimeout = setTimeout($gVhhF$depictaiutilishared.catchify(() => {
+            setPollAlignment_(false);
+            disableResizePollingTimeout = undefined;
+          }), 1000);
+        }));
       });
       return true;
     }, false);
@@ -12764,13 +12777,11 @@ function $5cbaffcb5602e671$export$44f738469d5570cf({
         transition: `opacity ${closeDuration}ms ease-out`
       }));
       await Promise.all([addedToBody.animate([{
-        width: $gVhhF$solidjs.untrack(inModalFieldWidth),
-        left: "50%",
-        transform: "translateX(-50%)"
+        width: $gVhhF$solidjs.untrack(inModalFieldWidthPx),
+        left: `${$gVhhF$solidjs.untrack(innerWidthReactive) / 2 - $gVhhF$solidjs.untrack(inModalFieldWidth) / 2}px`
       }, {
         width: width + "px",
-        left: left + "px",
-        transform: "translateX(0%)"
+        left: left + "px"
       }], {
         duration: closeDuration,
         fill: "forwards",

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 _SearchFilter2 } from "@depict-ai/types/api/SearchRequestV2";
-export const version = "4.0.0";
+export const version = "4.0.1";
 export type ModalAlignmentSignals = {
   body_: Signal<JSX.CSSProperties>;
   field_: Signal<JSX.CSSProperties>;
@@ -642,7 +642,7 @@ export type BaseSearchProviderConfig<InputDisplay extends Display, PossibleTrans
    */
   enableContentSearch?: boolean;
   /**
-   * The search modal component to use. You can switch between the classic and the new search modal. Provide one of the components here that you can import from the same package as the one you're using to see this message.
+   * The search modal component to use. You can switch between the classic and the new search modal. Provide one of the components here that you can import from the same package as the one you're using to see this message (`SearchModalV2` or `ClassicSearchModal`).
    * You also need to reflect the choice in SCSS, example:
    * ```scss
    * @use "@depict-ai/js-ui" as plp-styling with (

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.0.0";
+const $ec291e0010116877$export$83d89fbfd8236492 = "4.0.1";
 function $136f1d4d6c7ba6ac$export$e417c49320921907(dependency, fetcher) {
   const [promiseOfCurrentFetcherRun, setPromiseOfCurrentFetcherRun] = $9HbP8$createSignal();
   const deparallelizedFetcher = $9HbP8$deparallelize_no_drop(async dependencyValue => {
@@ -12579,11 +12579,22 @@ function $0e562a5b247b1fc2$export$44f738469d5570cf({
   modalSearchFieldOuterWidth_: modalSearchFieldOuterWidth_
 }) {
   return $9HbP8$createRoot(dispose => {
+    const [innerWidthReactive, setInnerWidthReactive] = $9HbP8$createSignal(innerWidth);
+    const resizeObserver = new ResizeObserver(records => setInnerWidthReactive(records.at(-1).contentRect.width));
+    const {
+      left: left,
+      top: top,
+      width: width
+    } = actualField_.getBoundingClientRect();
     const fakeField = makeFakeField_();
     const owner = $9HbP8$getOwner();
     const inModalFieldWidth = $9HbP8$createMemo(
     // Can't have `min(${modalSearchFieldOuterWidth_()}px, var(--field-max-width, 600px))` because the WAAPI doesn't support that, so we need ot calculate it in JS
-    () => Math.min(modalSearchFieldOuterWidth_(), parseFloat(getComputedStyle(actualField_).getPropertyValue("--field-max-width") || "600")) + "px");
+    () => Math.min(modalSearchFieldOuterWidth_(), parseFloat(getComputedStyle(actualField_).getPropertyValue("--field-max-width") || "600")));
+    const inModalFieldWidthPx = $9HbP8$createMemo(() => inModalFieldWidth() + "px");
+    let disableResizePollingTimeout;
+    resizeObserver.observe(document.documentElement);
+    $9HbP8$onCleanup(() => resizeObserver.disconnect());
     actualField_.replaceWith(fakeField);
     // Don't move the wrapped div since that would confuse run_in_root_or_auto_cleanup, but do actually move the field the user clicked around so that all selection stuff etc. is easier
     const addedToBody = wrap_ ? (() => {
@@ -12592,21 +12603,17 @@ function $0e562a5b247b1fc2$export$44f738469d5570cf({
       return _el$;
     })() : actualField_;
     document.body.append(addedToBody);
-    const {
-      left: left,
-      top: top,
-      width: width
-    } = fakeField.getBoundingClientRect();
     const zIndexOfFake = getComputedStyle(fakeField).zIndex;
     Object.assign(addedToBody.style, {
       position: "fixed",
       top: top + "px",
+      left: left + "px",
       width: width + "px",
       ...(zIndexOfFake !== "auto" ? {
         zIndex: +zIndexOfFake + 1
       } : {})
     });
-    const pxOffCenter = innerWidth / 2 - (left + width / 2);
+    const pxOffCenter = $9HbP8$untrack(innerWidthReactive) / 2 - (left + width / 2);
     const openDuration = pxOffCenter > 100 ? 250 : 125; // faster animations if little left-right movement
     const closeDuration = pxOffCenter > 100 ? 150 : 100;
     setPollAlignment_(true);
@@ -12625,24 +12632,30 @@ function $0e562a5b247b1fc2$export$44f738469d5570cf({
       // Wait until the ResizeObserver has delivered a value in case that the modal is small or has much padding so we know that we can't animate our fake field to be wider than that
       addedToBody.animate([{
         left: left + "px",
-        transform: "translateX(0%)",
         width: width + "px"
       }, {
-        left: "50%",
-        transform: "translateX(-50%)",
-        width: $9HbP8$untrack(inModalFieldWidth)
+        left: `${$9HbP8$untrack(innerWidthReactive) / 2 - $9HbP8$untrack(inModalFieldWidth) / 2}px`,
+        width: $9HbP8$untrack(inModalFieldWidthPx)
       }], {
         duration: openDuration,
         easing: "ease-in"
       }).finished.then(() => {
         setPollAlignment_(false);
-        $9HbP8$runWithOwner(owner, () => $9HbP8$createEffect(() =>
-        // When animation has finished, still dynamically set the size of the search field behind in case the user resizes the window
-        Object.assign(addedToBody.style, {
-          left: "50%",
-          transform: "translateX(-50%)",
-          width: inModalFieldWidth()
-        })));
+        $9HbP8$runWithOwner(owner, () => $9HbP8$createEffect(() => {
+          // When animation has finished, still dynamically set the size of the search field behind in case the user resizes the window
+          Object.assign(addedToBody.style, {
+            // This is left: 50%, transform: translateX(-50) with extra steps but when using it safari and firefox glitch out like crazy
+            left: `${innerWidthReactive() / 2 - inModalFieldWidth() / 2}px`,
+            width: inModalFieldWidthPx()
+          });
+          // We might only have changed the left position which align_field doesn't know about, make it poll the position for a while
+          setPollAlignment_(true);
+          if (disableResizePollingTimeout) clearTimeout(disableResizePollingTimeout);
+          disableResizePollingTimeout = setTimeout($9HbP8$catchify(() => {
+            setPollAlignment_(false);
+            disableResizePollingTimeout = undefined;
+          }), 1000);
+        }));
       });
       return true;
     }, false);
@@ -12685,13 +12698,11 @@ function $0e562a5b247b1fc2$export$44f738469d5570cf({
         transition: `opacity ${closeDuration}ms ease-out`
       }));
       await Promise.all([addedToBody.animate([{
-        width: $9HbP8$untrack(inModalFieldWidth),
-        left: "50%",
-        transform: "translateX(-50%)"
+        width: $9HbP8$untrack(inModalFieldWidthPx),
+        left: `${$9HbP8$untrack(innerWidthReactive) / 2 - $9HbP8$untrack(inModalFieldWidth) / 2}px`
       }, {
         width: width + "px",
-        left: left + "px",
-        transform: "translateX(0%)"
+        left: left + "px"
       }], {
         duration: closeDuration,
         fill: "forwards",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depict-ai/ui",
-  "version": "4.0.0",
+  "version": "4.0.1",
   "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,9 +236,9 @@
     "@babel/plugin-transform-typescript": "^7.22.9",
     "@babel/runtime": "latest",
     "@babel/runtime-corejs3": "^7.22.6",
-    "@depict-ai/plp-styling": "^3.0.1",
+    "@depict-ai/plp-styling": "^3.0.3",
     "@depict-ai/types": "^5.0.3",
-    "@depict-ai/utilishared": "^2.0.9",
+    "@depict-ai/utilishared": "^2.0.10",
     "solid-js": "^1.8.7"
   },
   "type": "module",

package/server/ES10/index.cjs

@@ -92,7 +92,7 @@ $parcel$export(module.exports, "defaultCategoryTitlePlugin", () => $33eed84f447a
 $parcel$export(module.exports, "version", () => $aa1938dec50d6c12$export$83d89fbfd8236492);
 $parcel$export(module.exports, "SearchField", () => $98aef9965764903d$export$316f6f283ae64765);
 /*! Depict.ai search and product listing SDK */
-const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.0.0";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.0.1";
 function $a28000bc10de28ad$export$e417c49320921907(dependency, fetcher) {
   const [promiseOfCurrentFetcherRun, setPromiseOfCurrentFetcherRun] = $3hooq$solidjs.createSignal();
   const deparallelizedFetcher = $3hooq$depictaiutilishared.deparallelize_no_drop(async dependencyValue => {
@@ -11053,30 +11053,37 @@ function $a60bc7692ce52705$export$44f738469d5570cf(_ref) {
     modalSearchFieldOuterWidth_: modalSearchFieldOuterWidth_
   } = _ref;
   return $3hooq$solidjs.createRoot(dispose => {
+    const [innerWidthReactive, setInnerWidthReactive] = $3hooq$solidjs.createSignal(innerWidth);
+    const resizeObserver = new ResizeObserver(records => setInnerWidthReactive(records.at(-1).contentRect.width));
+    const {
+      left: left,
+      top: top,
+      width: width
+    } = actualField_.getBoundingClientRect();
     const fakeField = makeFakeField_();
     const owner = $3hooq$solidjs.getOwner();
     const inModalFieldWidth = $3hooq$solidjs.createMemo(
     // Can't have `min(${modalSearchFieldOuterWidth_()}px, var(--field-max-width, 600px))` because the WAAPI doesn't support that, so we need ot calculate it in JS
-    () => Math.min(modalSearchFieldOuterWidth_(), parseFloat(getComputedStyle(actualField_).getPropertyValue("--field-max-width") || "600")) + "px");
+    () => Math.min(modalSearchFieldOuterWidth_(), parseFloat(getComputedStyle(actualField_).getPropertyValue("--field-max-width") || "600")));
+    const inModalFieldWidthPx = $3hooq$solidjs.createMemo(() => inModalFieldWidth() + "px");
+    let disableResizePollingTimeout;
+    resizeObserver.observe(document.documentElement);
+    $3hooq$solidjs.onCleanup(() => resizeObserver.disconnect());
     actualField_.replaceWith(fakeField);
     // Don't move the wrapped div since that would confuse run_in_root_or_auto_cleanup, but do actually move the field the user clicked around so that all selection stuff etc. is easier
     const addedToBody = wrap_ ? $3hooq$solidjsweb.ssr($a60bc7692ce52705$var$_tmpl$, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.escape(actualField_)) : actualField_;
     document.body.append(addedToBody);
-    const {
-      left: left,
-      top: top,
-      width: width
-    } = fakeField.getBoundingClientRect();
     const zIndexOfFake = getComputedStyle(fakeField).zIndex;
     Object.assign(addedToBody.style, {
       position: "fixed",
       top: top + "px",
+      left: left + "px",
       width: width + "px",
       ...(zIndexOfFake !== "auto" ? {
         zIndex: +zIndexOfFake + 1
       } : {})
     });
-    const pxOffCenter = innerWidth / 2 - (left + width / 2);
+    const pxOffCenter = $3hooq$solidjs.untrack(innerWidthReactive) / 2 - (left + width / 2);
     const openDuration = pxOffCenter > 100 ? 250 : 125; // faster animations if little left-right movement
     const closeDuration = pxOffCenter > 100 ? 150 : 100;
     setPollAlignment_(true);
@@ -11095,24 +11102,30 @@ function $a60bc7692ce52705$export$44f738469d5570cf(_ref) {
       // Wait until the ResizeObserver has delivered a value in case that the modal is small or has much padding so we know that we can't animate our fake field to be wider than that
       addedToBody.animate([{
         left: left + "px",
-        transform: "translateX(0%)",
         width: width + "px"
       }, {
-        left: "50%",
-        transform: "translateX(-50%)",
-        width: $3hooq$solidjs.untrack(inModalFieldWidth)
+        left: "".concat($3hooq$solidjs.untrack(innerWidthReactive) / 2 - $3hooq$solidjs.untrack(inModalFieldWidth) / 2, "px"),
+        width: $3hooq$solidjs.untrack(inModalFieldWidthPx)
       }], {
         duration: openDuration,
         easing: "ease-in"
       }).finished.then(() => {
         setPollAlignment_(false);
-        $3hooq$solidjs.runWithOwner(owner, () => $3hooq$solidjs.createEffect(() =>
-        // When animation has finished, still dynamically set the size of the search field behind in case the user resizes the window
-        Object.assign(addedToBody.style, {
-          left: "50%",
-          transform: "translateX(-50%)",
-          width: inModalFieldWidth()
-        })));
+        $3hooq$solidjs.runWithOwner(owner, () => $3hooq$solidjs.createEffect(() => {
+          // When animation has finished, still dynamically set the size of the search field behind in case the user resizes the window
+          Object.assign(addedToBody.style, {
+            // This is left: 50%, transform: translateX(-50) with extra steps but when using it safari and firefox glitch out like crazy
+            left: "".concat(innerWidthReactive() / 2 - inModalFieldWidth() / 2, "px"),
+            width: inModalFieldWidthPx()
+          });
+          // We might only have changed the left position which align_field doesn't know about, make it poll the position for a while
+          setPollAlignment_(true);
+          if (disableResizePollingTimeout) clearTimeout(disableResizePollingTimeout);
+          disableResizePollingTimeout = setTimeout($3hooq$depictaiutilishared.catchify(() => {
+            setPollAlignment_(false);
+            disableResizePollingTimeout = undefined;
+          }), 1000);
+        }));
       });
       return true;
     }, false);
@@ -11155,13 +11168,11 @@ function $a60bc7692ce52705$export$44f738469d5570cf(_ref) {
         transition: "opacity ".concat(closeDuration, "ms ease-out")
       }));
       await Promise.all([addedToBody.animate([{
-        width: $3hooq$solidjs.untrack(inModalFieldWidth),
-        left: "50%",
-        transform: "translateX(-50%)"
+        width: $3hooq$solidjs.untrack(inModalFieldWidthPx),
+        left: "".concat($3hooq$solidjs.untrack(innerWidthReactive) / 2 - $3hooq$solidjs.untrack(inModalFieldWidth) / 2, "px")
       }, {
         width: width + "px",
-        left: left + "px",
-        transform: "translateX(0%)"
+        left: left + "px"
       }], {
         duration: closeDuration,
         fill: "forwards",

package/server/ES10/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 _SearchFilter2 } from "@depict-ai/types/api/SearchRequestV2";
-export const version = "4.0.0";
+export const version = "4.0.1";
 export type ModalAlignmentSignals = {
   body_: Signal<JSX.CSSProperties>;
   field_: Signal<JSX.CSSProperties>;
@@ -642,7 +642,7 @@ export type BaseSearchProviderConfig<InputDisplay extends Display, PossibleTrans
    */
   enableContentSearch?: boolean;
   /**
-   * The search modal component to use. You can switch between the classic and the new search modal. Provide one of the components here that you can import from the same package as the one you're using to see this message.
+   * The search modal component to use. You can switch between the classic and the new search modal. Provide one of the components here that you can import from the same package as the one you're using to see this message (`SearchModalV2` or `ClassicSearchModal`).
    * You also need to reflect the choice in SCSS, example:
    * ```scss
    * @use "@depict-ai/js-ui" as plp-styling with (

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.0.0";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "4.0.1";
 function $a604a8ffa4e4c03f$export$e417c49320921907(dependency, fetcher) {
   const [promiseOfCurrentFetcherRun, setPromiseOfCurrentFetcherRun] = $b8hua$createSignal();
   const deparallelizedFetcher = $b8hua$deparallelize_no_drop(async dependencyValue => {
@@ -10971,30 +10971,37 @@ function $937791b86d3d1509$export$44f738469d5570cf(_ref) {
     modalSearchFieldOuterWidth_: modalSearchFieldOuterWidth_
   } = _ref;
   return $b8hua$createRoot(dispose => {
+    const [innerWidthReactive, setInnerWidthReactive] = $b8hua$createSignal(innerWidth);
+    const resizeObserver = new ResizeObserver(records => setInnerWidthReactive(records.at(-1).contentRect.width));
+    const {
+      left: left,
+      top: top,
+      width: width
+    } = actualField_.getBoundingClientRect();
     const fakeField = makeFakeField_();
     const owner = $b8hua$getOwner();
     const inModalFieldWidth = $b8hua$createMemo(
     // Can't have `min(${modalSearchFieldOuterWidth_()}px, var(--field-max-width, 600px))` because the WAAPI doesn't support that, so we need ot calculate it in JS
-    () => Math.min(modalSearchFieldOuterWidth_(), parseFloat(getComputedStyle(actualField_).getPropertyValue("--field-max-width") || "600")) + "px");
+    () => Math.min(modalSearchFieldOuterWidth_(), parseFloat(getComputedStyle(actualField_).getPropertyValue("--field-max-width") || "600")));
+    const inModalFieldWidthPx = $b8hua$createMemo(() => inModalFieldWidth() + "px");
+    let disableResizePollingTimeout;
+    resizeObserver.observe(document.documentElement);
+    $b8hua$onCleanup(() => resizeObserver.disconnect());
     actualField_.replaceWith(fakeField);
     // Don't move the wrapped div since that would confuse run_in_root_or_auto_cleanup, but do actually move the field the user clicked around so that all selection stuff etc. is easier
     const addedToBody = wrap_ ? $b8hua$ssr($937791b86d3d1509$var$_tmpl$, $b8hua$ssrHydrationKey(), $b8hua$escape(actualField_)) : actualField_;
     document.body.append(addedToBody);
-    const {
-      left: left,
-      top: top,
-      width: width
-    } = fakeField.getBoundingClientRect();
     const zIndexOfFake = getComputedStyle(fakeField).zIndex;
     Object.assign(addedToBody.style, {
       position: "fixed",
       top: top + "px",
+      left: left + "px",
       width: width + "px",
       ...(zIndexOfFake !== "auto" ? {
         zIndex: +zIndexOfFake + 1
       } : {})
     });
-    const pxOffCenter = innerWidth / 2 - (left + width / 2);
+    const pxOffCenter = $b8hua$untrack(innerWidthReactive) / 2 - (left + width / 2);
     const openDuration = pxOffCenter > 100 ? 250 : 125; // faster animations if little left-right movement
     const closeDuration = pxOffCenter > 100 ? 150 : 100;
     setPollAlignment_(true);
@@ -11013,24 +11020,30 @@ function $937791b86d3d1509$export$44f738469d5570cf(_ref) {
       // Wait until the ResizeObserver has delivered a value in case that the modal is small or has much padding so we know that we can't animate our fake field to be wider than that
       addedToBody.animate([{
         left: left + "px",
-        transform: "translateX(0%)",
         width: width + "px"
       }, {
-        left: "50%",
-        transform: "translateX(-50%)",
-        width: $b8hua$untrack(inModalFieldWidth)
+        left: "".concat($b8hua$untrack(innerWidthReactive) / 2 - $b8hua$untrack(inModalFieldWidth) / 2, "px"),
+        width: $b8hua$untrack(inModalFieldWidthPx)
       }], {
         duration: openDuration,
         easing: "ease-in"
       }).finished.then(() => {
         setPollAlignment_(false);
-        $b8hua$runWithOwner(owner, () => $b8hua$createEffect(() =>
-        // When animation has finished, still dynamically set the size of the search field behind in case the user resizes the window
-        Object.assign(addedToBody.style, {
-          left: "50%",
-          transform: "translateX(-50%)",
-          width: inModalFieldWidth()
-        })));
+        $b8hua$runWithOwner(owner, () => $b8hua$createEffect(() => {
+          // When animation has finished, still dynamically set the size of the search field behind in case the user resizes the window
+          Object.assign(addedToBody.style, {
+            // This is left: 50%, transform: translateX(-50) with extra steps but when using it safari and firefox glitch out like crazy
+            left: "".concat(innerWidthReactive() / 2 - inModalFieldWidth() / 2, "px"),
+            width: inModalFieldWidthPx()
+          });
+          // We might only have changed the left position which align_field doesn't know about, make it poll the position for a while
+          setPollAlignment_(true);
+          if (disableResizePollingTimeout) clearTimeout(disableResizePollingTimeout);
+          disableResizePollingTimeout = setTimeout($b8hua$catchify(() => {
+            setPollAlignment_(false);
+            disableResizePollingTimeout = undefined;
+          }), 1000);
+        }));
       });
       return true;
     }, false);
@@ -11073,13 +11086,11 @@ function $937791b86d3d1509$export$44f738469d5570cf(_ref) {
         transition: "opacity ".concat(closeDuration, "ms ease-out")
       }));
       await Promise.all([addedToBody.animate([{
-        width: $b8hua$untrack(inModalFieldWidth),
-        left: "50%",
-        transform: "translateX(-50%)"
+        width: $b8hua$untrack(inModalFieldWidthPx),
+        left: "".concat($b8hua$untrack(innerWidthReactive) / 2 - $b8hua$untrack(inModalFieldWidth) / 2, "px")
       }, {
         width: width + "px",
-        left: left + "px",
-        transform: "translateX(0%)"
+        left: left + "px"
       }], {
         duration: closeDuration,
         fill: "forwards",

package/server/latest/index.cjs

@@ -86,7 +86,7 @@ $parcel$export(module.exports, "defaultCategoryTitlePlugin", () => $a3280f0aad99
 $parcel$export(module.exports, "version", () => $b757f75811f3261f$export$83d89fbfd8236492);
 $parcel$export(module.exports, "SearchField", () => $c0a0659cf97e8eb2$export$316f6f283ae64765);
 /*! Depict.ai search and product listing SDK */
-const $b757f75811f3261f$export$83d89fbfd8236492 = "4.0.0";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "4.0.1";
 function $53df95e470b2f8d2$export$e417c49320921907(dependency, fetcher) {
   const [promiseOfCurrentFetcherRun, setPromiseOfCurrentFetcherRun] = $5vyXB$solidjs.createSignal();
   const deparallelizedFetcher = $5vyXB$depictaiutilishared.deparallelize_no_drop(async dependencyValue => {
@@ -10304,30 +10304,37 @@ function $5cbaffcb5602e671$export$44f738469d5570cf({
   modalSearchFieldOuterWidth_: modalSearchFieldOuterWidth_
 }) {
   return $5vyXB$solidjs.createRoot(dispose => {
+    const [innerWidthReactive, setInnerWidthReactive] = $5vyXB$solidjs.createSignal(innerWidth);
+    const resizeObserver = new ResizeObserver(records => setInnerWidthReactive(records.at(-1).contentRect.width));
+    const {
+      left: left,
+      top: top,
+      width: width
+    } = actualField_.getBoundingClientRect();
     const fakeField = makeFakeField_();
     const owner = $5vyXB$solidjs.getOwner();
     const inModalFieldWidth = $5vyXB$solidjs.createMemo(
     // Can't have `min(${modalSearchFieldOuterWidth_()}px, var(--field-max-width, 600px))` because the WAAPI doesn't support that, so we need ot calculate it in JS
-    () => Math.min(modalSearchFieldOuterWidth_(), parseFloat(getComputedStyle(actualField_).getPropertyValue("--field-max-width") || "600")) + "px");
+    () => Math.min(modalSearchFieldOuterWidth_(), parseFloat(getComputedStyle(actualField_).getPropertyValue("--field-max-width") || "600")));
+    const inModalFieldWidthPx = $5vyXB$solidjs.createMemo(() => inModalFieldWidth() + "px");
+    let disableResizePollingTimeout;
+    resizeObserver.observe(document.documentElement);
+    $5vyXB$solidjs.onCleanup(() => resizeObserver.disconnect());
     actualField_.replaceWith(fakeField);
     // Don't move the wrapped div since that would confuse run_in_root_or_auto_cleanup, but do actually move the field the user clicked around so that all selection stuff etc. is easier
     const addedToBody = wrap_ ? $5vyXB$solidjsweb.ssr($5cbaffcb5602e671$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape(actualField_)) : actualField_;
     document.body.append(addedToBody);
-    const {
-      left: left,
-      top: top,
-      width: width
-    } = fakeField.getBoundingClientRect();
     const zIndexOfFake = getComputedStyle(fakeField).zIndex;
     Object.assign(addedToBody.style, {
       position: "fixed",
       top: top + "px",
+      left: left + "px",
       width: width + "px",
       ...(zIndexOfFake !== "auto" ? {
         zIndex: +zIndexOfFake + 1
       } : {})
     });
-    const pxOffCenter = innerWidth / 2 - (left + width / 2);
+    const pxOffCenter = $5vyXB$solidjs.untrack(innerWidthReactive) / 2 - (left + width / 2);
     const openDuration = pxOffCenter > 100 ? 250 : 125; // faster animations if little left-right movement
     const closeDuration = pxOffCenter > 100 ? 150 : 100;
     setPollAlignment_(true);
@@ -10346,24 +10353,30 @@ function $5cbaffcb5602e671$export$44f738469d5570cf({
       // Wait until the ResizeObserver has delivered a value in case that the modal is small or has much padding so we know that we can't animate our fake field to be wider than that
       addedToBody.animate([{
         left: left + "px",
-        transform: "translateX(0%)",
         width: width + "px"
       }, {
-        left: "50%",
-        transform: "translateX(-50%)",
-        width: $5vyXB$solidjs.untrack(inModalFieldWidth)
+        left: `${$5vyXB$solidjs.untrack(innerWidthReactive) / 2 - $5vyXB$solidjs.untrack(inModalFieldWidth) / 2}px`,
+        width: $5vyXB$solidjs.untrack(inModalFieldWidthPx)
       }], {
         duration: openDuration,
         easing: "ease-in"
       }).finished.then(() => {
         setPollAlignment_(false);
-        $5vyXB$solidjs.runWithOwner(owner, () => $5vyXB$solidjs.createEffect(() =>
-        // When animation has finished, still dynamically set the size of the search field behind in case the user resizes the window
-        Object.assign(addedToBody.style, {
-          left: "50%",
-          transform: "translateX(-50%)",
-          width: inModalFieldWidth()
-        })));
+        $5vyXB$solidjs.runWithOwner(owner, () => $5vyXB$solidjs.createEffect(() => {
+          // When animation has finished, still dynamically set the size of the search field behind in case the user resizes the window
+          Object.assign(addedToBody.style, {
+            // This is left: 50%, transform: translateX(-50) with extra steps but when using it safari and firefox glitch out like crazy
+            left: `${innerWidthReactive() / 2 - inModalFieldWidth() / 2}px`,
+            width: inModalFieldWidthPx()
+          });
+          // We might only have changed the left position which align_field doesn't know about, make it poll the position for a while
+          setPollAlignment_(true);
+          if (disableResizePollingTimeout) clearTimeout(disableResizePollingTimeout);
+          disableResizePollingTimeout = setTimeout($5vyXB$depictaiutilishared.catchify(() => {
+            setPollAlignment_(false);
+            disableResizePollingTimeout = undefined;
+          }), 1000);
+        }));
       });
       return true;
     }, false);
@@ -10406,13 +10419,11 @@ function $5cbaffcb5602e671$export$44f738469d5570cf({
         transition: `opacity ${closeDuration}ms ease-out`
       }));
       await Promise.all([addedToBody.animate([{
-        width: $5vyXB$solidjs.untrack(inModalFieldWidth),
-        left: "50%",
-        transform: "translateX(-50%)"
+        width: $5vyXB$solidjs.untrack(inModalFieldWidthPx),
+        left: `${$5vyXB$solidjs.untrack(innerWidthReactive) / 2 - $5vyXB$solidjs.untrack(inModalFieldWidth) / 2}px`
       }, {
         width: width + "px",
-        left: left + "px",
-        transform: "translateX(0%)"
+        left: left + "px"
       }], {
         duration: closeDuration,
         fill: "forwards",

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 _SearchFilter2 } from "@depict-ai/types/api/SearchRequestV2";
-export const version = "4.0.0";
+export const version = "4.0.1";
 export type ModalAlignmentSignals = {
   body_: Signal<JSX.CSSProperties>;
   field_: Signal<JSX.CSSProperties>;
@@ -642,7 +642,7 @@ export type BaseSearchProviderConfig<InputDisplay extends Display, PossibleTrans
    */
   enableContentSearch?: boolean;
   /**
-   * The search modal component to use. You can switch between the classic and the new search modal. Provide one of the components here that you can import from the same package as the one you're using to see this message.
+   * The search modal component to use. You can switch between the classic and the new search modal. Provide one of the components here that you can import from the same package as the one you're using to see this message (`SearchModalV2` or `ClassicSearchModal`).
    * You also need to reflect the choice in SCSS, example:
    * ```scss
    * @use "@depict-ai/js-ui" as plp-styling with (

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.0.0";
+const $ec291e0010116877$export$83d89fbfd8236492 = "4.0.1";
 function $136f1d4d6c7ba6ac$export$e417c49320921907(dependency, fetcher) {
   const [promiseOfCurrentFetcherRun, setPromiseOfCurrentFetcherRun] = $i7OB2$createSignal();
   const deparallelizedFetcher = $i7OB2$deparallelize_no_drop(async dependencyValue => {
@@ -10225,30 +10225,37 @@ function $0e562a5b247b1fc2$export$44f738469d5570cf({
   modalSearchFieldOuterWidth_: modalSearchFieldOuterWidth_
 }) {
   return $i7OB2$createRoot(dispose => {
+    const [innerWidthReactive, setInnerWidthReactive] = $i7OB2$createSignal(innerWidth);
+    const resizeObserver = new ResizeObserver(records => setInnerWidthReactive(records.at(-1).contentRect.width));
+    const {
+      left: left,
+      top: top,
+      width: width
+    } = actualField_.getBoundingClientRect();
     const fakeField = makeFakeField_();
     const owner = $i7OB2$getOwner();
     const inModalFieldWidth = $i7OB2$createMemo(
     // Can't have `min(${modalSearchFieldOuterWidth_()}px, var(--field-max-width, 600px))` because the WAAPI doesn't support that, so we need ot calculate it in JS
-    () => Math.min(modalSearchFieldOuterWidth_(), parseFloat(getComputedStyle(actualField_).getPropertyValue("--field-max-width") || "600")) + "px");
+    () => Math.min(modalSearchFieldOuterWidth_(), parseFloat(getComputedStyle(actualField_).getPropertyValue("--field-max-width") || "600")));
+    const inModalFieldWidthPx = $i7OB2$createMemo(() => inModalFieldWidth() + "px");
+    let disableResizePollingTimeout;
+    resizeObserver.observe(document.documentElement);
+    $i7OB2$onCleanup(() => resizeObserver.disconnect());
     actualField_.replaceWith(fakeField);
     // Don't move the wrapped div since that would confuse run_in_root_or_auto_cleanup, but do actually move the field the user clicked around so that all selection stuff etc. is easier
     const addedToBody = wrap_ ? $i7OB2$ssr($0e562a5b247b1fc2$var$_tmpl$, $i7OB2$ssrHydrationKey(), $i7OB2$escape(actualField_)) : actualField_;
     document.body.append(addedToBody);
-    const {
-      left: left,
-      top: top,
-      width: width
-    } = fakeField.getBoundingClientRect();
     const zIndexOfFake = getComputedStyle(fakeField).zIndex;
     Object.assign(addedToBody.style, {
       position: "fixed",
       top: top + "px",
+      left: left + "px",
       width: width + "px",
       ...(zIndexOfFake !== "auto" ? {
         zIndex: +zIndexOfFake + 1
       } : {})
     });
-    const pxOffCenter = innerWidth / 2 - (left + width / 2);
+    const pxOffCenter = $i7OB2$untrack(innerWidthReactive) / 2 - (left + width / 2);
     const openDuration = pxOffCenter > 100 ? 250 : 125; // faster animations if little left-right movement
     const closeDuration = pxOffCenter > 100 ? 150 : 100;
     setPollAlignment_(true);
@@ -10267,24 +10274,30 @@ function $0e562a5b247b1fc2$export$44f738469d5570cf({
       // Wait until the ResizeObserver has delivered a value in case that the modal is small or has much padding so we know that we can't animate our fake field to be wider than that
       addedToBody.animate([{
         left: left + "px",
-        transform: "translateX(0%)",
         width: width + "px"
       }, {
-        left: "50%",
-        transform: "translateX(-50%)",
-        width: $i7OB2$untrack(inModalFieldWidth)
+        left: `${$i7OB2$untrack(innerWidthReactive) / 2 - $i7OB2$untrack(inModalFieldWidth) / 2}px`,
+        width: $i7OB2$untrack(inModalFieldWidthPx)
       }], {
         duration: openDuration,
         easing: "ease-in"
       }).finished.then(() => {
         setPollAlignment_(false);
-        $i7OB2$runWithOwner(owner, () => $i7OB2$createEffect(() =>
-        // When animation has finished, still dynamically set the size of the search field behind in case the user resizes the window
-        Object.assign(addedToBody.style, {
-          left: "50%",
-          transform: "translateX(-50%)",
-          width: inModalFieldWidth()
-        })));
+        $i7OB2$runWithOwner(owner, () => $i7OB2$createEffect(() => {
+          // When animation has finished, still dynamically set the size of the search field behind in case the user resizes the window
+          Object.assign(addedToBody.style, {
+            // This is left: 50%, transform: translateX(-50) with extra steps but when using it safari and firefox glitch out like crazy
+            left: `${innerWidthReactive() / 2 - inModalFieldWidth() / 2}px`,
+            width: inModalFieldWidthPx()
+          });
+          // We might only have changed the left position which align_field doesn't know about, make it poll the position for a while
+          setPollAlignment_(true);
+          if (disableResizePollingTimeout) clearTimeout(disableResizePollingTimeout);
+          disableResizePollingTimeout = setTimeout($i7OB2$catchify(() => {
+            setPollAlignment_(false);
+            disableResizePollingTimeout = undefined;
+          }), 1000);
+        }));
       });
       return true;
     }, false);
@@ -10327,13 +10340,11 @@ function $0e562a5b247b1fc2$export$44f738469d5570cf({
         transition: `opacity ${closeDuration}ms ease-out`
       }));
       await Promise.all([addedToBody.animate([{
-        width: $i7OB2$untrack(inModalFieldWidth),
-        left: "50%",
-        transform: "translateX(-50%)"
+        width: $i7OB2$untrack(inModalFieldWidthPx),
+        left: `${$i7OB2$untrack(innerWidthReactive) / 2 - $i7OB2$untrack(inModalFieldWidth) / 2}px`
       }, {
         width: width + "px",
-        left: left + "px",
-        transform: "translateX(0%)"
+        left: left + "px"
       }], {
         duration: closeDuration,
         fill: "forwards",