@depict-ai/ui 4.0.0 → 4.0.2

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.2";
 function $53df95e470b2f8d2$export$e417c49320921907(dependency, fetcher) {
   const [promiseOfCurrentFetcherRun, setPromiseOfCurrentFetcherRun] = $gVhhF$solidjs.createSignal();
   const deparallelizedFetcher = $gVhhF$depictaiutilishared.deparallelize_no_drop(async dependencyValue => {
@@ -2423,6 +2423,7 @@ function $19950faaac026e09$export$e6fffe67d4cdd848(whatToWatch) {
   return size;
 }
 const $19950faaac026e09$var$onIdleFunctionsSymbol = /*@__PURE__*/Symbol("onIdleFunctions");
+const $19950faaac026e09$export$f8945274f08a3105 = /*@__PURE__*/Symbol("listingContextAspectRatios");
 function $19950faaac026e09$export$6e5611bc7e57e477(props) {
   // Enable reactive props
   const otherOptions = $gVhhF$solidjs.createMemo(() => {
@@ -2487,6 +2488,21 @@ function $19950faaac026e09$export$6e5611bc7e57e477(props) {
   let timeoutSet = false;
   let gotCleanedUp = false;
   img.classList.add("s-responsive-image");
+  if (listingContext) {
+    let prevValue;
+    const aspectRatios = listingContext[$19950faaac026e09$export$f8945274f08a3105] ||= new (0, $gVhhF$depictaiutilishared.ListenableSet)();
+    img.addEventListener("load", $gVhhF$depictaiutilishared.catchify(() => {
+      // Save our aspect ratio whenever it changes, so that we can base the containers on the most dominant aspect ratio, used in SearchModalV2
+      const aspectRatio_ = img.naturalWidth / img.naturalHeight;
+      if (prevValue) aspectRatios.delete(prevValue);
+      const newValue = !isNaN(aspectRatio_) ? {
+        aspectRatio_: aspectRatio_
+      } : undefined;
+      if (newValue) aspectRatios.add(newValue);
+      prevValue = newValue;
+    }));
+    $gVhhF$solidjs.onCleanup(() => prevValue && aspectRatios.delete(prevValue));
+  }
   $gVhhF$solidjs.onCleanup(() => gotCleanedUp = true);
   $gVhhF$solidjsweb.spread(img, $gVhhF$solidjs.mergeProps(otherOptions), false, true);
   $gVhhF$solidjs.createEffect(() => {
@@ -2554,9 +2570,28 @@ function $a33065cfed827fc0$export$e4b984597b71e989(props) {
     // create a signal that's the same for all items in this listing
     context[$a33065cfed827fc0$export$d7b7ab832c20e2f4] = $gVhhF$solidjs.createSignal();
   const [currentImageSize, setCurrentImageSize] = context?.[$a33065cfed827fc0$export$d7b7ab832c20e2f4] || $a33065cfed827fc0$var$backupSizeSignal; // use global fallback signal (might lead to blurry images) if no context is available
+  const aspectRatiosSet = context ?
+  // If the context exists we have to create the set here as getting it here would be too late when it's created by ShopifyResponsiveImg below
+  context[(0, $19950faaac026e09$export$f8945274f08a3105)] ||= new (0, $gVhhF$depictaiutilishared.ListenableSet)() : undefined;
+  const [aspectRatios, setAspectRatios] = $gVhhF$solidjs.createSignal(aspectRatiosSet, {
+    equals: false
+  });
+  const aspectRatioToUse = $gVhhF$solidjs.createMemo(() => {
+    const aspectRatiosSet = aspectRatios(); // This signal "changes" to the same set every time the set changes, so we can use it as a dependency here
+    useMostPrevalentAspectRatio: {
+      if (!aspectRatiosSet || !props.autoAdjustAspectRatio) break useMostPrevalentAspectRatio;
+      // Get the aspect ratio that most of the loaded images inside the ListingProvider we are, load
+      const asArray = [...aspectRatiosSet].map(({
+        aspectRatio_: aspectRatio_
+      }) => aspectRatio_);
+      const mostPrevalentAspectRatio = $gVhhF$depictaiutilishared.findMostFrequentItem(asArray);
+      if (mostPrevalentAspectRatio) return `var(${(0, $6f604560873e4f69$export$8a2234b5b1a5ebd4)}, ${mostPrevalentAspectRatio})`;
+    }
+    return props.aspectRatio;
+  });
   const container = $gVhhF$solidjsweb.createComponent((0, $93304d59a9747aa6$export$94026ee33dbabc26), {
     get aspectRatio() {
-      return props.aspectRatio;
+      return aspectRatioToUse();
     },
     get ["class"]() {
       return props.class;
@@ -2565,6 +2600,10 @@ function $a33065cfed827fc0$export$e4b984597b71e989(props) {
   const owner = $gVhhF$solidjs.getOwner();
   let createdSizeAccessor = false;
   let wasCleanedUp = false;
+  for (const event of ["add", "delete"]) {
+    aspectRatiosSet?.addEventListener(event, () => setAspectRatios(aspectRatiosSet));
+    $gVhhF$solidjs.onCleanup(() => aspectRatiosSet?.removeEventListener(event, () => setAspectRatios(aspectRatiosSet)));
+  }
   $gVhhF$solidjs.createEffect(() => {
     if (currentImageSize() || wasCleanedUp) return; // We get into the effect when onCleanup is called if we don't have wasCleanedUp
     // ensure we always have a size accessor
@@ -3579,7 +3618,8 @@ function $11597ae03e703a47$var$RawSearchModalV2({
               get src() {
                 return props.src_;
               },
-              aspectRatio: `var(${(0, $6f604560873e4f69$export$8a2234b5b1a5ebd4)}, 1)`
+              autoAdjustAspectRatio: true,
+              aspectRatio: 1
             }),
             ...instant_results_options_
           }), _el$4, _co$);
@@ -3920,7 +3960,15 @@ async function $9abb0a35d4b60ed3$export$79b1565500412d9b(search_modal, modal_fn_
         const actually_close = () => {
           dispose();
           on_dispose?.();
-          modal_els.forEach(el => el.remove());
+          const {
+            activeElement: activeElement
+          } = document;
+          modal_els.forEach(el => {
+            if (el.contains(activeElement))
+              // Fix page jumping to the bottom when closing modal with scape after animation in safari
+              activeElement?.blur?.();
+            el.remove();
+          });
         };
         if (animation_started && +new Date() - animation_started > 1000)
           // Animation broke, close it this time
@@ -12658,11 +12706,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 +12730,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 +12759,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 +12825,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.2";
 export type ModalAlignmentSignals = {
   body_: Signal<JSX.CSSProperties>;
   field_: Signal<JSX.CSSProperties>;
@@ -407,6 +407,28 @@ export function ShopifyResponsiveImg(props: {
 } & Omit<JSX.ImgHTMLAttributes<HTMLImageElement>, "srcset" | "src" | "sizes"> & {
   src: string;
 }): JSX.Element;
+type ImagePlaceholderBaseOptions = {
+  style?: JSX.CSSProperties;
+  class?: string;
+};
+type ImagePlaceholderBlockOptions = {
+  width: string;
+  height: string;
+};
+type ImagePlaceholderImageOptions = {
+  aspectRatio: number | string;
+};
+/**
+ * A placeholder that can be used instead of an image or other block of content while it's loading.
+ * The placeholder has `display:block`, meaning it will create a new "row" in the layout for itself. Can be used either for images with a defined aspect ratio (ContainedImage) or blocks.
+ * @property aspectRatio if aspectRatio is defined the placeholder will be in "image mode" and fill out the available width and then adjust the height according to the aspectRatio
+ * @property width If width and height is set, the defined width and height will be used.
+ * @property height If width and height is set, the defined width and height will be used.
+ * @property class extra classes to add to the placeholder
+ * @property style extra styles to add to the placeholder
+ */
+export function ImagePlaceholder(props: ImagePlaceholderBaseOptions & (ImagePlaceholderBlockOptions | ImagePlaceholderImageOptions)): JSX.Element;
+export function DefaultInstantCardPlaceholder(): HTMLDivElement;
 export const shopifyContainedImageContextSymbol: unique symbol;
 /**
  * Abstraction built on top of ShopifyResponsiveImg. This is your one-stop-shop If you just need a responsive image.
@@ -417,11 +439,13 @@ export const shopifyContainedImageContextSymbol: unique symbol;
  * @property aspectRatio aspect ratio of the image
  * @property class extra class to add to the container
  * @property alt alt text for the image
+ * @property autoAdjustAspectRatio whether to automatically adjust the aspect ratio of the image to the majority of the aspect ratios of loaded images in the current listing provider. Defaults to false. Can be overriden with css variable --image-aspect-ratio
  * @property imgProps props to pass to ShopifyResponsiveImg to add to the <img> element
  */
 export function ShopifyContainedImage(props: {
   src: string;
   aspectRatio: number | string;
+  autoAdjustAspectRatio?: boolean;
   class?: string;
   imgProps?: Omit<Parameters<typeof ShopifyResponsiveImg>[0], "size" | "src">;
 }): HTMLDivElement;
@@ -489,28 +513,6 @@ interface Styles {
   [selector: string]: JSX.CSSProperties;
 }
 export const styles_to_valid_css_string: (styles: Styles) => string;
-type ImagePlaceholderBaseOptions = {
-  style?: JSX.CSSProperties;
-  class?: string;
-};
-type ImagePlaceholderBlockOptions = {
-  width: string;
-  height: string;
-};
-type ImagePlaceholderImageOptions = {
-  aspectRatio: number | string;
-};
-/**
- * A placeholder that can be used instead of an image or other block of content while it's loading.
- * The placeholder has `display:block`, meaning it will create a new "row" in the layout for itself. Can be used either for images with a defined aspect ratio (ContainedImage) or blocks.
- * @property aspectRatio if aspectRatio is defined the placeholder will be in "image mode" and fill out the available width and then adjust the height according to the aspectRatio
- * @property width If width and height is set, the defined width and height will be used.
- * @property height If width and height is set, the defined width and height will be used.
- * @property class extra classes to add to the placeholder
- * @property style extra styles to add to the placeholder
- */
-export function ImagePlaceholder(props: ImagePlaceholderBaseOptions & (ImagePlaceholderBlockOptions | ImagePlaceholderImageOptions)): JSX.Element;
-export function DefaultInstantCardPlaceholder(): HTMLDivElement;
 /**
  * Second generation search modal - the solid component that gets added to <body> when the search modal is opened
  */
@@ -642,7 +644,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

@@ -1,13 +1,13 @@
-import { add_to_version_info as $9HbP8$add_to_version_info, deparallelize_no_drop as $9HbP8$deparallelize_no_drop, catchify as $9HbP8$catchify, make_random_classname as $9HbP8$make_random_classname, ContainedImage as $9HbP8$ContainedImage, standard_price_format as $9HbP8$standard_price_format, javascript_media_query as $9HbP8$javascript_media_query, dlog as $9HbP8$dlog, camelCasifyObject as $9HbP8$camelCasifyObject, buildThresholdList as $9HbP8$buildThresholdList, make_asyncIterable_exiter as $9HbP8$make_asyncIterable_exiter, href_change_ipns as $9HbP8$href_change_ipns, observer as $9HbP8$observer, report as $9HbP8$report, base64_encode_unicode as $9HbP8$base64_encode_unicode, base64_decode_unicode as $9HbP8$base64_decode_unicode, queueMacroTask as $9HbP8$queueMacroTask, dwarn as $9HbP8$dwarn, slider_fading_factory as $9HbP8$slider_fading_factory, Amazing_Slider as $9HbP8$Amazing_Slider, slider_snap_css as $9HbP8$slider_snap_css, n_col_styling_with_dist as $9HbP8$n_col_styling_with_dist, layout_get_visible_recs_without_partial_rows as $9HbP8$layout_get_visible_recs_without_partial_rows, layout_get_total_rec_amount_for_row as $9HbP8$layout_get_total_rec_amount_for_row, layout_media_query_header as $9HbP8$layout_media_query_header, use_href_accessor as $9HbP8$use_href_accessor, get_session_id as $9HbP8$get_session_id, add_version_query_params as $9HbP8$add_version_query_params, base_url as $9HbP8$base_url, instant_exec_on_suspect_history_change as $9HbP8$instant_exec_on_suspect_history_change, slider_fractional_factory as $9HbP8$slider_fractional_factory, useExpandingContainer as $9HbP8$useExpandingContainer, hex_to_rgb as $9HbP8$hex_to_rgb, relative_luminance_from_rgb as $9HbP8$relative_luminance_from_rgb, snakeCasifyObject as $9HbP8$snakeCasifyObject, fetch_retry as $9HbP8$fetch_retry, sort_obj as $9HbP8$sort_obj, make_url_with_query_params as $9HbP8$make_url_with_query_params, is_debug as $9HbP8$is_debug, ListenableSet as $9HbP8$ListenableSet1, insert_surfaces as $9HbP8$insert_surfaces } from "@depict-ai/utilishared/latest";
+import { add_to_version_info as $9HbP8$add_to_version_info, deparallelize_no_drop as $9HbP8$deparallelize_no_drop, catchify as $9HbP8$catchify, make_random_classname as $9HbP8$make_random_classname, ContainedImage as $9HbP8$ContainedImage, standard_price_format as $9HbP8$standard_price_format, javascript_media_query as $9HbP8$javascript_media_query, dlog as $9HbP8$dlog, camelCasifyObject as $9HbP8$camelCasifyObject, buildThresholdList as $9HbP8$buildThresholdList, make_asyncIterable_exiter as $9HbP8$make_asyncIterable_exiter, href_change_ipns as $9HbP8$href_change_ipns, observer as $9HbP8$observer, report as $9HbP8$report, base64_encode_unicode as $9HbP8$base64_encode_unicode, base64_decode_unicode as $9HbP8$base64_decode_unicode, ListenableSet as $9HbP8$ListenableSet, findMostFrequentItem as $9HbP8$findMostFrequentItem, queueMacroTask as $9HbP8$queueMacroTask, dwarn as $9HbP8$dwarn, slider_fading_factory as $9HbP8$slider_fading_factory, Amazing_Slider as $9HbP8$Amazing_Slider, slider_snap_css as $9HbP8$slider_snap_css, n_col_styling_with_dist as $9HbP8$n_col_styling_with_dist, layout_get_visible_recs_without_partial_rows as $9HbP8$layout_get_visible_recs_without_partial_rows, layout_get_total_rec_amount_for_row as $9HbP8$layout_get_total_rec_amount_for_row, layout_media_query_header as $9HbP8$layout_media_query_header, use_href_accessor as $9HbP8$use_href_accessor, get_session_id as $9HbP8$get_session_id, add_version_query_params as $9HbP8$add_version_query_params, base_url as $9HbP8$base_url, instant_exec_on_suspect_history_change as $9HbP8$instant_exec_on_suspect_history_change, slider_fractional_factory as $9HbP8$slider_fractional_factory, useExpandingContainer as $9HbP8$useExpandingContainer, hex_to_rgb as $9HbP8$hex_to_rgb, relative_luminance_from_rgb as $9HbP8$relative_luminance_from_rgb, snakeCasifyObject as $9HbP8$snakeCasifyObject, fetch_retry as $9HbP8$fetch_retry, sort_obj as $9HbP8$sort_obj, make_url_with_query_params as $9HbP8$make_url_with_query_params, is_debug as $9HbP8$is_debug, insert_surfaces as $9HbP8$insert_surfaces } from "@depict-ai/utilishared/latest";
 import { createSignal as $9HbP8$createSignal, createResource as $9HbP8$createResource, createEffect as $9HbP8$createEffect, untrack as $9HbP8$untrack, createMemo as $9HbP8$createMemo, onCleanup as $9HbP8$onCleanup, Show as $9HbP8$Show, createComputed as $9HbP8$createComputed, For as $9HbP8$For, getOwner as $9HbP8$getOwner, runWithOwner as $9HbP8$runWithOwner, on as $9HbP8$on, Index as $9HbP8$Index, batch as $9HbP8$batch, ErrorBoundary as $9HbP8$ErrorBoundary, createContext as $9HbP8$createContext, useContext as $9HbP8$useContext, mergeProps as $9HbP8$mergeProps1, createUniqueId as $9HbP8$createUniqueId, createRenderEffect as $9HbP8$createRenderEffect, createSelector as $9HbP8$createSelector, children as $9HbP8$children, splitProps as $9HbP8$splitProps, createRoot as $9HbP8$createRoot, Suspense as $9HbP8$Suspense, createReaction as $9HbP8$createReaction, mapArray as $9HbP8$mapArray } from "solid-js";
 import { template as $9HbP8$template, getNextElement as $9HbP8$getNextElement, addEventListener as $9HbP8$addEventListener, insert as $9HbP8$insert, memo as $9HbP8$memo, runHydrationEvents as $9HbP8$runHydrationEvents, createComponent as $9HbP8$createComponent, getNextMarker as $9HbP8$getNextMarker, use as $9HbP8$use, effect as $9HbP8$effect, classList as $9HbP8$classList, setAttribute as $9HbP8$setAttribute, delegateEvents as $9HbP8$delegateEvents, style as $9HbP8$style, className as $9HbP8$className, spread as $9HbP8$spread, mergeProps as $9HbP8$mergeProps, setProperty as $9HbP8$setProperty, isServer as $9HbP8$isServer, Dynamic as $9HbP8$Dynamic } from "solid-js/web";
-import { ListenableSet as $9HbP8$ListenableSet, catchify as $9HbP8$catchify1, use_href_accessor as $9HbP8$use_href_accessor1, report as $9HbP8$report1 } from "@depict-ai/utilishared/latest";
+import { ListenableSet as $9HbP8$ListenableSet1, catchify as $9HbP8$catchify1, use_href_accessor as $9HbP8$use_href_accessor1, report as $9HbP8$report1 } from "@depict-ai/utilishared/latest";
 import { createStore as $9HbP8$createStore, reconcile as $9HbP8$reconcile } from "solid-js/store";
 
 /*! 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.2";
 function $136f1d4d6c7ba6ac$export$e417c49320921907(dependency, fetcher) {
   const [promiseOfCurrentFetcherRun, setPromiseOfCurrentFetcherRun] = $9HbP8$createSignal();
   const deparallelizedFetcher = $9HbP8$deparallelize_no_drop(async dependencyValue => {
@@ -2344,6 +2344,7 @@ function $e8ffe11ed01df0fe$export$e6fffe67d4cdd848(whatToWatch) {
   return size;
 }
 const $e8ffe11ed01df0fe$var$onIdleFunctionsSymbol = /*@__PURE__*/Symbol("onIdleFunctions");
+const $e8ffe11ed01df0fe$export$f8945274f08a3105 = /*@__PURE__*/Symbol("listingContextAspectRatios");
 function $e8ffe11ed01df0fe$export$6e5611bc7e57e477(props) {
   // Enable reactive props
   const otherOptions = $9HbP8$createMemo(() => {
@@ -2408,6 +2409,21 @@ function $e8ffe11ed01df0fe$export$6e5611bc7e57e477(props) {
   let timeoutSet = false;
   let gotCleanedUp = false;
   img.classList.add("s-responsive-image");
+  if (listingContext) {
+    let prevValue;
+    const aspectRatios = listingContext[$e8ffe11ed01df0fe$export$f8945274f08a3105] ||= new (0, $9HbP8$ListenableSet)();
+    img.addEventListener("load", $9HbP8$catchify(() => {
+      // Save our aspect ratio whenever it changes, so that we can base the containers on the most dominant aspect ratio, used in SearchModalV2
+      const aspectRatio_ = img.naturalWidth / img.naturalHeight;
+      if (prevValue) aspectRatios.delete(prevValue);
+      const newValue = !isNaN(aspectRatio_) ? {
+        aspectRatio_: aspectRatio_
+      } : undefined;
+      if (newValue) aspectRatios.add(newValue);
+      prevValue = newValue;
+    }));
+    $9HbP8$onCleanup(() => prevValue && aspectRatios.delete(prevValue));
+  }
   $9HbP8$onCleanup(() => gotCleanedUp = true);
   $9HbP8$spread(img, $9HbP8$mergeProps1(otherOptions), false, true);
   $9HbP8$createEffect(() => {
@@ -2475,9 +2491,28 @@ function $660070e2a394b3c3$export$e4b984597b71e989(props) {
     // create a signal that's the same for all items in this listing
     context[$660070e2a394b3c3$export$d7b7ab832c20e2f4] = $9HbP8$createSignal();
   const [currentImageSize, setCurrentImageSize] = context?.[$660070e2a394b3c3$export$d7b7ab832c20e2f4] || $660070e2a394b3c3$var$backupSizeSignal; // use global fallback signal (might lead to blurry images) if no context is available
+  const aspectRatiosSet = context ?
+  // If the context exists we have to create the set here as getting it here would be too late when it's created by ShopifyResponsiveImg below
+  context[(0, $e8ffe11ed01df0fe$export$f8945274f08a3105)] ||= new (0, $9HbP8$ListenableSet)() : undefined;
+  const [aspectRatios, setAspectRatios] = $9HbP8$createSignal(aspectRatiosSet, {
+    equals: false
+  });
+  const aspectRatioToUse = $9HbP8$createMemo(() => {
+    const aspectRatiosSet = aspectRatios(); // This signal "changes" to the same set every time the set changes, so we can use it as a dependency here
+    useMostPrevalentAspectRatio: {
+      if (!aspectRatiosSet || !props.autoAdjustAspectRatio) break useMostPrevalentAspectRatio;
+      // Get the aspect ratio that most of the loaded images inside the ListingProvider we are, load
+      const asArray = [...aspectRatiosSet].map(({
+        aspectRatio_: aspectRatio_
+      }) => aspectRatio_);
+      const mostPrevalentAspectRatio = $9HbP8$findMostFrequentItem(asArray);
+      if (mostPrevalentAspectRatio) return `var(${(0, $bb15dfb548a7666e$export$8a2234b5b1a5ebd4)}, ${mostPrevalentAspectRatio})`;
+    }
+    return props.aspectRatio;
+  });
   const container = $9HbP8$createComponent((0, $f18d425032111270$export$94026ee33dbabc26), {
     get aspectRatio() {
-      return props.aspectRatio;
+      return aspectRatioToUse();
     },
     get ["class"]() {
       return props.class;
@@ -2486,6 +2521,10 @@ function $660070e2a394b3c3$export$e4b984597b71e989(props) {
   const owner = $9HbP8$getOwner();
   let createdSizeAccessor = false;
   let wasCleanedUp = false;
+  for (const event of ["add", "delete"]) {
+    aspectRatiosSet?.addEventListener(event, () => setAspectRatios(aspectRatiosSet));
+    $9HbP8$onCleanup(() => aspectRatiosSet?.removeEventListener(event, () => setAspectRatios(aspectRatiosSet)));
+  }
   $9HbP8$createEffect(() => {
     if (currentImageSize() || wasCleanedUp) return; // We get into the effect when onCleanup is called if we don't have wasCleanedUp
     // ensure we always have a size accessor
@@ -3500,7 +3539,8 @@ function $500a16dd18ee5a71$var$RawSearchModalV2({
               get src() {
                 return props.src_;
               },
-              aspectRatio: `var(${(0, $bb15dfb548a7666e$export$8a2234b5b1a5ebd4)}, 1)`
+              autoAdjustAspectRatio: true,
+              aspectRatio: 1
             }),
             ...instant_results_options_
           }), _el$4, _co$);
@@ -3676,7 +3716,7 @@ const $024fbc0a2d796fad$var$TabsContext = /*@__PURE__*/$9HbP8$createContext();
 const $024fbc0a2d796fad$var$useTabs = () => $9HbP8$useContext($024fbc0a2d796fad$var$TabsContext);
 function $024fbc0a2d796fad$export$b2539bed5023c21c(props) {
   return $9HbP8$createComponent($024fbc0a2d796fad$var$TabsContext.Provider, {
-    value: new (0, $9HbP8$ListenableSet)(),
+    value: new (0, $9HbP8$ListenableSet1)(),
     get children() {
       return $9HbP8$createComponent($024fbc0a2d796fad$var$ActualTabs, $9HbP8$mergeProps(props, {
         get children() {
@@ -3841,7 +3881,15 @@ async function $194bd6b8e4c59830$export$79b1565500412d9b(search_modal, modal_fn_
         const actually_close = () => {
           dispose();
           on_dispose?.();
-          modal_els.forEach(el => el.remove());
+          const {
+            activeElement: activeElement
+          } = document;
+          modal_els.forEach(el => {
+            if (el.contains(activeElement))
+              // Fix page jumping to the bottom when closing modal with scape after animation in safari
+              activeElement?.blur?.();
+            el.remove();
+          });
         };
         if (animation_started && +new Date() - animation_started > 1000)
           // Animation broke, close it this time
@@ -12483,7 +12531,7 @@ function $49de9d31aeea1b5e$export$6d0c9c22f6652669({
     number_: num_results,
     i18n_: i18n_
   });
-  const queries_without_content_results_ = new (0, $9HbP8$ListenableSet1)();
+  const queries_without_content_results_ = new (0, $9HbP8$ListenableSet)();
   const [check_query, set_check_query] = $9HbP8$createSignal(false);
   const placeholders_enabled = $9HbP8$createMemo(() => {
     // don't show placeholders when the user toggles filters
@@ -12579,11 +12627,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 +12651,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 +12680,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 +12746,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.2",
   "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.4",
     "@depict-ai/types": "^5.0.3",
-    "@depict-ai/utilishared": "^2.0.9",
+    "@depict-ai/utilishared": "^2.0.11",
     "solid-js": "^1.8.7"
   },
   "type": "module",