@depict-ai/ui 2.0.9 → 2.0.11

package/ES10/index.cjs

@@ -67,7 +67,7 @@ $parcel$export(module.exports, "defaultColsAtSize", () => $33eed84f447aa0c0$expo
 $parcel$export(module.exports, "defaultCategoryTitlePlugin", () => $33eed84f447aa0c0$export$7bf543b9d9be2c22);
 $parcel$export(module.exports, "version", () => $aa1938dec50d6c12$export$83d89fbfd8236492);
 /*! Depict.ai search and product listing SDK */
-const $aa1938dec50d6c12$export$83d89fbfd8236492 = "2.0.9";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "2.0.11";
 
 /** @jsxImportSource solid-js */
 
@@ -80,8 +80,17 @@ function $13671aa5e984acd9$export$9f191182275e9ef(what_to_watch) {
       setSize(width);
     }
   }));
-  resizeObserver.observe(what_to_watch);
-  $52FdA$solidjs.onCleanup(() => resizeObserver.disconnect());
+  // If we start observing elements before they're in the DOM Chrome (Version 117.0.5938.92 (Official Build) (arm64)) sometimes gives us a resize event with a width of 0 and then doesn't dispatch one with the actual width once it's in the DOM. So we wait until the element is in the DOM before we start observing it.
+  const disconnect = (0, $52FdA$depictaiutilishared.observer).onexists(what_to_watch, _ref => {
+    let {
+      element: element
+    } = _ref;
+    return resizeObserver.observe(element);
+  });
+  $52FdA$solidjs.onCleanup(() => {
+    resizeObserver.disconnect();
+    disconnect();
+  });
   return size;
 }
 const $5401a6698b0c0658$var$transform_elements = sorted_cols_at_size => {
@@ -3727,8 +3736,8 @@ function $a162c9a08dc208c2$var$modify_only_local_filter(local_filter_object, sel
   }
   return modified_filter_object;
 }
-async function $4cf7d9829d60d844$export$79b1565500412d9b(search_modal, modal_fn_opts) {
-  const body = await (0, $52FdA$depictaiutilishared.observer).wait_for_element("body");
+async function $4cf7d9829d60d844$export$79b1565500412d9b(search_modal, modal_fn_opts, parent) {
+  const body = parent || (await (0, $52FdA$depictaiutilishared.observer).wait_for_element("body"));
   let dispose_and_remove;
   const open_modal_ = function () {
     let extra_options_for_modal = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -10942,6 +10951,7 @@ class $ddd39c5f36f49703$export$ac6237957a15b3f0 {
       disable_scrolling_during_modal = true,
       bottom_distance_under_modal: bottom_distance_under_modal,
       render_instant_card: render_instant_card,
+      override_modal_element: override_modal_element,
       ...props_on_class
     } = _ref;
     $ddd39c5f36f49703$var$_classPrivateFieldInitSpec(this, $ddd39c5f36f49703$var$_locale_signal, {
@@ -11097,7 +11107,7 @@ class $ddd39c5f36f49703$export$ac6237957a15b3f0 {
           enable_category_suggestions_: enable_category_suggestions,
           disable_scrolling_: disable_scrolling_during_modal,
           bottom_distance_under_modal_: bottom_distance_under_modal
-        });
+        }, override_modal_element);
         // This will add some default behaviour to open_modal_ if no style_props_ are supplied
         // The default behaviour is to align the modal with the input field if possible
         const modal_opening_effect = () => {

package/ES10/index.d.ts

@@ -7,7 +7,7 @@ import { CategorySuggestion, SearchSuggestionsResponse } from "@depict-ai/types/
 import { BaseSearchRequest } from "@depict-ai/types/api/BaseSearchRequest";
 import { SearchSuggestionsRequest } from "@depict-ai/types/api/SearchSuggestionsRequest";
 import { ProductListingRequest } from "@depict-ai/types/api/ProductListingRequest";
-export const version = "2.0.9";
+export const version = "2.0.11";
 /**
  * Returns accessor with the size of the provided element, including padding and border (I think)
  */
@@ -435,6 +435,7 @@ export type PageURLCreator<InputDisplay extends ModernDisplay, OutputDisplay ext
  * So the idea is to have a modal. It should either be rendered and exist, in which case it is in the foreground and open, or it's completely gone. This makes things easier.
  * @param search_modal a function which returns an array of nodes that get appended into <body>. This function will run in its own solid-js root which will call onCleanup and cleanup all reactive things inside it when the modal is closed. This function will get the arguments passed to open_modal_ and the modal_fn_opts merged together, along with register_closing_animation_ where an async function that resolves once the animation is finished can be provided to animate the closing of the modal
  * @param modal_fn_opts static options for the modal that won't change on a per-opening basis
+ * @param parent override the parent element to append the modal to. Defaults to <body>
  @returns a function to open and close the modal. When calling the open_modal_ function additional parameters can be passed to the modal
  */
 export function general_modal_abstraction<StaticOptions extends {
@@ -445,7 +446,7 @@ export function general_modal_abstraction<StaticOptions extends {
   close_modal_: VoidFunction;
   open_modal_: (extra_options_for_modal?: ExtraOptionsProvidedOnOpen, on_dispose?: VoidFunction) => void;
   register_closing_animation_: (animation: () => Promise<any>) => void;
-}) => Node_Array, modal_fn_opts: StaticOptions): Promise<{
+}) => Node_Array, modal_fn_opts: StaticOptions, parent?: HTMLElement | ShadowRoot): Promise<{
   open_modal_: (extra_options_for_modal?: ExtraOptionsProvidedOnOpen, on_dispose?: VoidFunction) => void;
   close_modal_: () => void;
 }>;
@@ -753,6 +754,7 @@ type GeneralConstructorOptions<InputDisplay extends Display, OutputDisplay exten
   disable_scrolling_during_modal?: boolean;
   bottom_distance_under_modal?: Accessor<number | undefined>;
   render_instant_card?: InstantCard<OutputDisplay extends ModernDisplay ? OutputDisplay : InputDisplay>;
+  override_modal_element?: HTMLElement | ShadowRoot;
 };
 type ConstructorOptionsWithApi<InputDisplay extends Display, OutputDisplay extends ModernDisplay | never> = GeneralConstructorOptions<InputDisplay, OutputDisplay> & {
   api: DepictAPI<InputDisplay, OutputDisplay>;
@@ -786,6 +788,7 @@ export class DepictSearch<InputDisplay extends Display, OutputDisplay extends Mo
     disable_scrolling_during_modal,
     bottom_distance_under_modal,
     render_instant_card,
+    override_modal_element,
     ...props_on_class
   }: ConstructorOptions<InputDisplay, OutputDisplay>);
   get enable_content_search(): boolean | undefined;

package/ES10/index.js

@@ -1,4 +1,4 @@
-import { add_to_version_info as $8tj43$add_to_version_info, catchify as $8tj43$catchify, slider_fractional_factory as $8tj43$slider_fractional_factory, camelCasifyObject as $8tj43$camelCasifyObject, make_random_classname as $8tj43$make_random_classname, n_col_styling_with_dist as $8tj43$n_col_styling_with_dist, layout_get_visible_recs_without_partial_rows as $8tj43$layout_get_visible_recs_without_partial_rows, layout_get_total_rec_amount_for_row as $8tj43$layout_get_total_rec_amount_for_row, layout_media_query_header as $8tj43$layout_media_query_header, report as $8tj43$report, Amazing_Slider as $8tj43$Amazing_Slider, slider_snap_css as $8tj43$slider_snap_css, slider_fading_factory as $8tj43$slider_fading_factory, observer as $8tj43$observer, is_safari as $8tj43$is_safari, useExpandingContainer as $8tj43$useExpandingContainer, standard_price_format as $8tj43$standard_price_format, dlog as $8tj43$dlog, hex_to_rgb as $8tj43$hex_to_rgb, relative_luminance_from_rgb as $8tj43$relative_luminance_from_rgb, javascript_media_query as $8tj43$javascript_media_query, fetch_recs as $8tj43$fetch_recs, snakeCasifyObject as $8tj43$snakeCasifyObject, instant_exec_on_suspect_history_change as $8tj43$instant_exec_on_suspect_history_change, base_url as $8tj43$base_url, get_depict_id as $8tj43$get_depict_id, get_user_id as $8tj43$get_user_id, get_session_id as $8tj43$get_session_id, make_url_with_query_params as $8tj43$make_url_with_query_params, fetch_retry as $8tj43$fetch_retry, add_version_query_params as $8tj43$add_version_query_params, dwarn as $8tj43$dwarn, sort_obj as $8tj43$sort_obj, edit_current_page_meta_tags as $8tj43$edit_current_page_meta_tags, use_href_accessor as $8tj43$use_href_accessor, base64_encode_unicode as $8tj43$base64_encode_unicode, base64_decode_unicode as $8tj43$base64_decode_unicode, queueMacroTask as $8tj43$queueMacroTask, is_debug as $8tj43$is_debug, make_asyncIterable_exiter as $8tj43$make_asyncIterable_exiter, href_change_ipns as $8tj43$href_change_ipns, ContainedImage as $8tj43$ContainedImage, buildThresholdList as $8tj43$buildThresholdList, deparallelize_no_drop as $8tj43$deparallelize_no_drop, ListenableSet as $8tj43$ListenableSet, insert_surfaces as $8tj43$insert_surfaces } from "@depict-ai/utilishared/ES10";
+import { add_to_version_info as $8tj43$add_to_version_info, catchify as $8tj43$catchify, observer as $8tj43$observer, slider_fractional_factory as $8tj43$slider_fractional_factory, camelCasifyObject as $8tj43$camelCasifyObject, make_random_classname as $8tj43$make_random_classname, n_col_styling_with_dist as $8tj43$n_col_styling_with_dist, layout_get_visible_recs_without_partial_rows as $8tj43$layout_get_visible_recs_without_partial_rows, layout_get_total_rec_amount_for_row as $8tj43$layout_get_total_rec_amount_for_row, layout_media_query_header as $8tj43$layout_media_query_header, report as $8tj43$report, Amazing_Slider as $8tj43$Amazing_Slider, slider_snap_css as $8tj43$slider_snap_css, slider_fading_factory as $8tj43$slider_fading_factory, is_safari as $8tj43$is_safari, useExpandingContainer as $8tj43$useExpandingContainer, standard_price_format as $8tj43$standard_price_format, dlog as $8tj43$dlog, hex_to_rgb as $8tj43$hex_to_rgb, relative_luminance_from_rgb as $8tj43$relative_luminance_from_rgb, javascript_media_query as $8tj43$javascript_media_query, fetch_recs as $8tj43$fetch_recs, snakeCasifyObject as $8tj43$snakeCasifyObject, instant_exec_on_suspect_history_change as $8tj43$instant_exec_on_suspect_history_change, base_url as $8tj43$base_url, get_depict_id as $8tj43$get_depict_id, get_user_id as $8tj43$get_user_id, get_session_id as $8tj43$get_session_id, make_url_with_query_params as $8tj43$make_url_with_query_params, fetch_retry as $8tj43$fetch_retry, add_version_query_params as $8tj43$add_version_query_params, dwarn as $8tj43$dwarn, sort_obj as $8tj43$sort_obj, edit_current_page_meta_tags as $8tj43$edit_current_page_meta_tags, use_href_accessor as $8tj43$use_href_accessor, base64_encode_unicode as $8tj43$base64_encode_unicode, base64_decode_unicode as $8tj43$base64_decode_unicode, queueMacroTask as $8tj43$queueMacroTask, is_debug as $8tj43$is_debug, make_asyncIterable_exiter as $8tj43$make_asyncIterable_exiter, href_change_ipns as $8tj43$href_change_ipns, ContainedImage as $8tj43$ContainedImage, buildThresholdList as $8tj43$buildThresholdList, deparallelize_no_drop as $8tj43$deparallelize_no_drop, ListenableSet as $8tj43$ListenableSet, insert_surfaces as $8tj43$insert_surfaces } from "@depict-ai/utilishared/ES10";
 import { createSignal as $8tj43$createSignal, onCleanup as $8tj43$onCleanup, createMemo as $8tj43$createMemo, createResource as $8tj43$createResource, Suspense as $8tj43$Suspense, Show as $8tj43$Show, createRenderEffect as $8tj43$createRenderEffect, createRoot as $8tj43$createRoot, For as $8tj43$For, getOwner as $8tj43$getOwner, runWithOwner as $8tj43$runWithOwner, createEffect as $8tj43$createEffect, createUniqueId as $8tj43$createUniqueId, untrack as $8tj43$untrack, createComputed as $8tj43$createComputed, ErrorBoundary as $8tj43$ErrorBoundary, Index as $8tj43$Index, on as $8tj43$on, batch as $8tj43$batch, createReaction as $8tj43$createReaction } from "solid-js";
 import { template as $8tj43$template, getNextElement as $8tj43$getNextElement, insert as $8tj43$insert, createComponent as $8tj43$createComponent, mergeProps as $8tj43$mergeProps, isServer as $8tj43$isServer, spread as $8tj43$spread, runHydrationEvents as $8tj43$runHydrationEvents, addEventListener as $8tj43$addEventListener, className as $8tj43$className, memo as $8tj43$memo, delegateEvents as $8tj43$delegateEvents, effect as $8tj43$effect, classList as $8tj43$classList, setAttribute as $8tj43$setAttribute, getNextMarker as $8tj43$getNextMarker, style as $8tj43$style, Dynamic as $8tj43$Dynamic, use as $8tj43$use } from "solid-js/web";
 import $8tj43$babelruntimehelpersclassPrivateFieldSet from "@babel/runtime/helpers/classPrivateFieldSet";
@@ -8,7 +8,7 @@ import $8tj43$babelruntimehelpersdefineProperty from "@babel/runtime/helpers/def
 /*! 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 = "2.0.9";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "2.0.11";
 
 /** @jsxImportSource solid-js */
 
@@ -21,8 +21,17 @@ function $0dc044cffe1e825b$export$9f191182275e9ef(what_to_watch) {
       setSize(width);
     }
   }));
-  resizeObserver.observe(what_to_watch);
-  $8tj43$onCleanup(() => resizeObserver.disconnect());
+  // If we start observing elements before they're in the DOM Chrome (Version 117.0.5938.92 (Official Build) (arm64)) sometimes gives us a resize event with a width of 0 and then doesn't dispatch one with the actual width once it's in the DOM. So we wait until the element is in the DOM before we start observing it.
+  const disconnect = (0, $8tj43$observer).onexists(what_to_watch, _ref => {
+    let {
+      element: element
+    } = _ref;
+    return resizeObserver.observe(element);
+  });
+  $8tj43$onCleanup(() => {
+    resizeObserver.disconnect();
+    disconnect();
+  });
   return size;
 }
 const $a9c7ba6087881ac2$var$transform_elements = sorted_cols_at_size => {
@@ -3668,8 +3677,8 @@ function $44aa24b1bb793549$var$modify_only_local_filter(local_filter_object, sel
   }
   return modified_filter_object;
 }
-async function $d5f1e6a0f9117286$export$79b1565500412d9b(search_modal, modal_fn_opts) {
-  const body = await (0, $8tj43$observer).wait_for_element("body");
+async function $d5f1e6a0f9117286$export$79b1565500412d9b(search_modal, modal_fn_opts, parent) {
+  const body = parent || (await (0, $8tj43$observer).wait_for_element("body"));
   let dispose_and_remove;
   const open_modal_ = function () {
     let extra_options_for_modal = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -10883,6 +10892,7 @@ class $eb064bc3350276c1$export$ac6237957a15b3f0 {
       disable_scrolling_during_modal = true,
       bottom_distance_under_modal: bottom_distance_under_modal,
       render_instant_card: render_instant_card,
+      override_modal_element: override_modal_element,
       ...props_on_class
     } = _ref;
     $eb064bc3350276c1$var$_classPrivateFieldInitSpec(this, $eb064bc3350276c1$var$_locale_signal, {
@@ -11038,7 +11048,7 @@ class $eb064bc3350276c1$export$ac6237957a15b3f0 {
           enable_category_suggestions_: enable_category_suggestions,
           disable_scrolling_: disable_scrolling_during_modal,
           bottom_distance_under_modal_: bottom_distance_under_modal
-        });
+        }, override_modal_element);
         // This will add some default behaviour to open_modal_ if no style_props_ are supplied
         // The default behaviour is to align the modal with the input field if possible
         const modal_opening_effect = () => {

package/latest/index.cjs

@@ -61,7 +61,7 @@ $parcel$export(module.exports, "defaultColsAtSize", () => $a3280f0aad997933$expo
 $parcel$export(module.exports, "defaultCategoryTitlePlugin", () => $a3280f0aad997933$export$7bf543b9d9be2c22);
 $parcel$export(module.exports, "version", () => $b757f75811f3261f$export$83d89fbfd8236492);
 /*! Depict.ai search and product listing SDK */
-const $b757f75811f3261f$export$83d89fbfd8236492 = "2.0.9";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "2.0.11";
 
 /** @jsxImportSource solid-js */
 
@@ -73,8 +73,14 @@ function $e5f442fb78c98741$export$9f191182275e9ef(what_to_watch) {
       setSize(width);
     }
   }));
-  resizeObserver.observe(what_to_watch);
-  $gVhhF$solidjs.onCleanup(() => resizeObserver.disconnect());
+  // If we start observing elements before they're in the DOM Chrome (Version 117.0.5938.92 (Official Build) (arm64)) sometimes gives us a resize event with a width of 0 and then doesn't dispatch one with the actual width once it's in the DOM. So we wait until the element is in the DOM before we start observing it.
+  const disconnect = (0, $gVhhF$depictaiutilishared.observer).onexists(what_to_watch, ({
+    element: element
+  }) => resizeObserver.observe(element));
+  $gVhhF$solidjs.onCleanup(() => {
+    resizeObserver.disconnect();
+    disconnect();
+  });
   return size;
 }
 const $4e04be41243c3d80$var$transform_elements = sorted_cols_at_size => {
@@ -3490,8 +3496,8 @@ function $70482f04605572e2$var$modify_only_local_filter(local_filter_object, sel
   }
   return modified_filter_object;
 }
-async function $9abb0a35d4b60ed3$export$79b1565500412d9b(search_modal, modal_fn_opts) {
-  const body = await (0, $gVhhF$depictaiutilishared.observer).wait_for_element("body");
+async function $9abb0a35d4b60ed3$export$79b1565500412d9b(search_modal, modal_fn_opts, parent) {
+  const body = parent || (await (0, $gVhhF$depictaiutilishared.observer).wait_for_element("body"));
   let dispose_and_remove;
   const open_modal_ = (extra_options_for_modal = {}, on_dispose) => {
     if (dispose_and_remove)
@@ -10158,6 +10164,7 @@ class $2c61e4cd8229c49a$export$ac6237957a15b3f0 {
     disable_scrolling_during_modal = true,
     bottom_distance_under_modal: bottom_distance_under_modal,
     render_instant_card: render_instant_card,
+    override_modal_element: override_modal_element,
     ...props_on_class
   }) {
     const owner = $gVhhF$solidjs.getOwner() || $gVhhF$solidjs.createRoot(() => $gVhhF$solidjs.getOwner()); // we might have an owner, if so, pass it on. Otherwise, create one so solid doesn't print warnings to the console
@@ -10280,7 +10287,7 @@ class $2c61e4cd8229c49a$export$ac6237957a15b3f0 {
           enable_category_suggestions_: enable_category_suggestions,
           disable_scrolling_: disable_scrolling_during_modal,
           bottom_distance_under_modal_: bottom_distance_under_modal
-        });
+        }, override_modal_element);
         // This will add some default behaviour to open_modal_ if no style_props_ are supplied
         // The default behaviour is to align the modal with the input field if possible
         const modal_opening_effect = () => {

package/latest/index.d.ts

@@ -7,7 +7,7 @@ import { CategorySuggestion, SearchSuggestionsResponse } from "@depict-ai/types/
 import { BaseSearchRequest } from "@depict-ai/types/api/BaseSearchRequest";
 import { SearchSuggestionsRequest } from "@depict-ai/types/api/SearchSuggestionsRequest";
 import { ProductListingRequest } from "@depict-ai/types/api/ProductListingRequest";
-export const version = "2.0.9";
+export const version = "2.0.11";
 /**
  * Returns accessor with the size of the provided element, including padding and border (I think)
  */
@@ -435,6 +435,7 @@ export type PageURLCreator<InputDisplay extends ModernDisplay, OutputDisplay ext
  * So the idea is to have a modal. It should either be rendered and exist, in which case it is in the foreground and open, or it's completely gone. This makes things easier.
  * @param search_modal a function which returns an array of nodes that get appended into <body>. This function will run in its own solid-js root which will call onCleanup and cleanup all reactive things inside it when the modal is closed. This function will get the arguments passed to open_modal_ and the modal_fn_opts merged together, along with register_closing_animation_ where an async function that resolves once the animation is finished can be provided to animate the closing of the modal
  * @param modal_fn_opts static options for the modal that won't change on a per-opening basis
+ * @param parent override the parent element to append the modal to. Defaults to <body>
  @returns a function to open and close the modal. When calling the open_modal_ function additional parameters can be passed to the modal
  */
 export function general_modal_abstraction<StaticOptions extends {
@@ -445,7 +446,7 @@ export function general_modal_abstraction<StaticOptions extends {
   close_modal_: VoidFunction;
   open_modal_: (extra_options_for_modal?: ExtraOptionsProvidedOnOpen, on_dispose?: VoidFunction) => void;
   register_closing_animation_: (animation: () => Promise<any>) => void;
-}) => Node_Array, modal_fn_opts: StaticOptions): Promise<{
+}) => Node_Array, modal_fn_opts: StaticOptions, parent?: HTMLElement | ShadowRoot): Promise<{
   open_modal_: (extra_options_for_modal?: ExtraOptionsProvidedOnOpen, on_dispose?: VoidFunction) => void;
   close_modal_: () => void;
 }>;
@@ -753,6 +754,7 @@ type GeneralConstructorOptions<InputDisplay extends Display, OutputDisplay exten
   disable_scrolling_during_modal?: boolean;
   bottom_distance_under_modal?: Accessor<number | undefined>;
   render_instant_card?: InstantCard<OutputDisplay extends ModernDisplay ? OutputDisplay : InputDisplay>;
+  override_modal_element?: HTMLElement | ShadowRoot;
 };
 type ConstructorOptionsWithApi<InputDisplay extends Display, OutputDisplay extends ModernDisplay | never> = GeneralConstructorOptions<InputDisplay, OutputDisplay> & {
   api: DepictAPI<InputDisplay, OutputDisplay>;
@@ -786,6 +788,7 @@ export class DepictSearch<InputDisplay extends Display, OutputDisplay extends Mo
     disable_scrolling_during_modal,
     bottom_distance_under_modal,
     render_instant_card,
+    override_modal_element,
     ...props_on_class
   }: ConstructorOptions<InputDisplay, OutputDisplay>);
   get enable_content_search(): boolean | undefined;

package/latest/index.js

@@ -1,11 +1,11 @@
-import { add_to_version_info as $9HbP8$add_to_version_info, catchify as $9HbP8$catchify, slider_fractional_factory as $9HbP8$slider_fractional_factory, camelCasifyObject as $9HbP8$camelCasifyObject, make_random_classname as $9HbP8$make_random_classname, 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, report as $9HbP8$report, Amazing_Slider as $9HbP8$Amazing_Slider, slider_snap_css as $9HbP8$slider_snap_css, slider_fading_factory as $9HbP8$slider_fading_factory, observer as $9HbP8$observer, is_safari as $9HbP8$is_safari, useExpandingContainer as $9HbP8$useExpandingContainer, standard_price_format as $9HbP8$standard_price_format, dlog as $9HbP8$dlog, hex_to_rgb as $9HbP8$hex_to_rgb, relative_luminance_from_rgb as $9HbP8$relative_luminance_from_rgb, javascript_media_query as $9HbP8$javascript_media_query, fetch_recs as $9HbP8$fetch_recs, snakeCasifyObject as $9HbP8$snakeCasifyObject, instant_exec_on_suspect_history_change as $9HbP8$instant_exec_on_suspect_history_change, base_url as $9HbP8$base_url, get_depict_id as $9HbP8$get_depict_id, get_user_id as $9HbP8$get_user_id, get_session_id as $9HbP8$get_session_id, sort_obj as $9HbP8$sort_obj, fetch_retry as $9HbP8$fetch_retry, add_version_query_params as $9HbP8$add_version_query_params, dwarn as $9HbP8$dwarn, make_url_with_query_params as $9HbP8$make_url_with_query_params, edit_current_page_meta_tags as $9HbP8$edit_current_page_meta_tags, use_href_accessor as $9HbP8$use_href_accessor, base64_encode_unicode as $9HbP8$base64_encode_unicode, base64_decode_unicode as $9HbP8$base64_decode_unicode, queueMacroTask as $9HbP8$queueMacroTask, is_debug as $9HbP8$is_debug, make_asyncIterable_exiter as $9HbP8$make_asyncIterable_exiter, href_change_ipns as $9HbP8$href_change_ipns, ContainedImage as $9HbP8$ContainedImage, buildThresholdList as $9HbP8$buildThresholdList, deparallelize_no_drop as $9HbP8$deparallelize_no_drop, ListenableSet as $9HbP8$ListenableSet, insert_surfaces as $9HbP8$insert_surfaces } from "@depict-ai/utilishared/latest";
+import { add_to_version_info as $9HbP8$add_to_version_info, catchify as $9HbP8$catchify, observer as $9HbP8$observer, slider_fractional_factory as $9HbP8$slider_fractional_factory, camelCasifyObject as $9HbP8$camelCasifyObject, make_random_classname as $9HbP8$make_random_classname, 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, report as $9HbP8$report, Amazing_Slider as $9HbP8$Amazing_Slider, slider_snap_css as $9HbP8$slider_snap_css, slider_fading_factory as $9HbP8$slider_fading_factory, is_safari as $9HbP8$is_safari, useExpandingContainer as $9HbP8$useExpandingContainer, standard_price_format as $9HbP8$standard_price_format, dlog as $9HbP8$dlog, hex_to_rgb as $9HbP8$hex_to_rgb, relative_luminance_from_rgb as $9HbP8$relative_luminance_from_rgb, javascript_media_query as $9HbP8$javascript_media_query, fetch_recs as $9HbP8$fetch_recs, snakeCasifyObject as $9HbP8$snakeCasifyObject, instant_exec_on_suspect_history_change as $9HbP8$instant_exec_on_suspect_history_change, base_url as $9HbP8$base_url, get_depict_id as $9HbP8$get_depict_id, get_user_id as $9HbP8$get_user_id, get_session_id as $9HbP8$get_session_id, sort_obj as $9HbP8$sort_obj, fetch_retry as $9HbP8$fetch_retry, add_version_query_params as $9HbP8$add_version_query_params, dwarn as $9HbP8$dwarn, make_url_with_query_params as $9HbP8$make_url_with_query_params, edit_current_page_meta_tags as $9HbP8$edit_current_page_meta_tags, use_href_accessor as $9HbP8$use_href_accessor, base64_encode_unicode as $9HbP8$base64_encode_unicode, base64_decode_unicode as $9HbP8$base64_decode_unicode, queueMacroTask as $9HbP8$queueMacroTask, is_debug as $9HbP8$is_debug, make_asyncIterable_exiter as $9HbP8$make_asyncIterable_exiter, href_change_ipns as $9HbP8$href_change_ipns, ContainedImage as $9HbP8$ContainedImage, buildThresholdList as $9HbP8$buildThresholdList, deparallelize_no_drop as $9HbP8$deparallelize_no_drop, ListenableSet as $9HbP8$ListenableSet, insert_surfaces as $9HbP8$insert_surfaces } from "@depict-ai/utilishared/latest";
 import { createSignal as $9HbP8$createSignal, onCleanup as $9HbP8$onCleanup, createMemo as $9HbP8$createMemo, createResource as $9HbP8$createResource, Suspense as $9HbP8$Suspense, Show as $9HbP8$Show, createRenderEffect as $9HbP8$createRenderEffect, createRoot as $9HbP8$createRoot, For as $9HbP8$For, getOwner as $9HbP8$getOwner, runWithOwner as $9HbP8$runWithOwner, createEffect as $9HbP8$createEffect, createUniqueId as $9HbP8$createUniqueId, untrack as $9HbP8$untrack, createComputed as $9HbP8$createComputed, ErrorBoundary as $9HbP8$ErrorBoundary, Index as $9HbP8$Index, on as $9HbP8$on, batch as $9HbP8$batch, createReaction as $9HbP8$createReaction } from "solid-js";
 import { template as $9HbP8$template, getNextElement as $9HbP8$getNextElement, insert as $9HbP8$insert, createComponent as $9HbP8$createComponent, mergeProps as $9HbP8$mergeProps, isServer as $9HbP8$isServer, spread as $9HbP8$spread, runHydrationEvents as $9HbP8$runHydrationEvents, addEventListener as $9HbP8$addEventListener, className as $9HbP8$className, memo as $9HbP8$memo, delegateEvents as $9HbP8$delegateEvents, effect as $9HbP8$effect, classList as $9HbP8$classList, setAttribute as $9HbP8$setAttribute, getNextMarker as $9HbP8$getNextMarker, style as $9HbP8$style, Dynamic as $9HbP8$Dynamic, use as $9HbP8$use } from "solid-js/web";
 
 /*! 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 = "2.0.9";
+const $ec291e0010116877$export$83d89fbfd8236492 = "2.0.11";
 
 /** @jsxImportSource solid-js */
 
@@ -17,8 +17,14 @@ function $0fdb37d8ddabef25$export$9f191182275e9ef(what_to_watch) {
       setSize(width);
     }
   }));
-  resizeObserver.observe(what_to_watch);
-  $9HbP8$onCleanup(() => resizeObserver.disconnect());
+  // If we start observing elements before they're in the DOM Chrome (Version 117.0.5938.92 (Official Build) (arm64)) sometimes gives us a resize event with a width of 0 and then doesn't dispatch one with the actual width once it's in the DOM. So we wait until the element is in the DOM before we start observing it.
+  const disconnect = (0, $9HbP8$observer).onexists(what_to_watch, ({
+    element: element
+  }) => resizeObserver.observe(element));
+  $9HbP8$onCleanup(() => {
+    resizeObserver.disconnect();
+    disconnect();
+  });
   return size;
 }
 const $b5cccc8ee7d24677$var$transform_elements = sorted_cols_at_size => {
@@ -3434,8 +3440,8 @@ function $5efb5894079b220e$var$modify_only_local_filter(local_filter_object, sel
   }
   return modified_filter_object;
 }
-async function $194bd6b8e4c59830$export$79b1565500412d9b(search_modal, modal_fn_opts) {
-  const body = await (0, $9HbP8$observer).wait_for_element("body");
+async function $194bd6b8e4c59830$export$79b1565500412d9b(search_modal, modal_fn_opts, parent) {
+  const body = parent || (await (0, $9HbP8$observer).wait_for_element("body"));
   let dispose_and_remove;
   const open_modal_ = (extra_options_for_modal = {}, on_dispose) => {
     if (dispose_and_remove)
@@ -10102,6 +10108,7 @@ class $806c97b931758897$export$ac6237957a15b3f0 {
     disable_scrolling_during_modal = true,
     bottom_distance_under_modal: bottom_distance_under_modal,
     render_instant_card: render_instant_card,
+    override_modal_element: override_modal_element,
     ...props_on_class
   }) {
     const owner = $9HbP8$getOwner() || $9HbP8$createRoot(() => $9HbP8$getOwner()); // we might have an owner, if so, pass it on. Otherwise, create one so solid doesn't print warnings to the console
@@ -10224,7 +10231,7 @@ class $806c97b931758897$export$ac6237957a15b3f0 {
           enable_category_suggestions_: enable_category_suggestions,
           disable_scrolling_: disable_scrolling_during_modal,
           bottom_distance_under_modal_: bottom_distance_under_modal
-        });
+        }, override_modal_element);
         // This will add some default behaviour to open_modal_ if no style_props_ are supplied
         // The default behaviour is to align the modal with the input field if possible
         const modal_opening_effect = () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depict-ai/ui",
-  "version": "2.0.9",
+  "version": "2.0.11",
   "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",
@@ -238,7 +238,7 @@
     "@babel/runtime-corejs3": "^7.22.6",
     "@depict-ai/plp-styling": "^1.2.5",
     "@depict-ai/types": "^1.0.39",
-    "@depict-ai/utilishared": "^1.0.42",
+    "@depict-ai/utilishared": "^1.0.43",
     "solid-js": "^1.7.3"
   },
   "type": "module",

package/server/ES10/index.cjs

@@ -67,7 +67,7 @@ $parcel$export(module.exports, "defaultColsAtSize", () => $33eed84f447aa0c0$expo
 $parcel$export(module.exports, "defaultCategoryTitlePlugin", () => $33eed84f447aa0c0$export$7bf543b9d9be2c22);
 $parcel$export(module.exports, "version", () => $aa1938dec50d6c12$export$83d89fbfd8236492);
 /*! Depict.ai search and product listing SDK */
-const $aa1938dec50d6c12$export$83d89fbfd8236492 = "2.0.9";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "2.0.11";
 
 /** @jsxImportSource solid-js */
 
@@ -80,8 +80,17 @@ function $13671aa5e984acd9$export$9f191182275e9ef(what_to_watch) {
       setSize(width);
     }
   }));
-  resizeObserver.observe(what_to_watch);
-  $3hooq$solidjs.onCleanup(() => resizeObserver.disconnect());
+  // If we start observing elements before they're in the DOM Chrome (Version 117.0.5938.92 (Official Build) (arm64)) sometimes gives us a resize event with a width of 0 and then doesn't dispatch one with the actual width once it's in the DOM. So we wait until the element is in the DOM before we start observing it.
+  const disconnect = (0, $3hooq$depictaiutilishared.observer).onexists(what_to_watch, _ref => {
+    let {
+      element: element
+    } = _ref;
+    return resizeObserver.observe(element);
+  });
+  $3hooq$solidjs.onCleanup(() => {
+    resizeObserver.disconnect();
+    disconnect();
+  });
   return size;
 }
 const $5401a6698b0c0658$var$transform_elements = sorted_cols_at_size => {
@@ -2858,8 +2867,8 @@ function $a162c9a08dc208c2$var$modify_only_local_filter(local_filter_object, sel
   }
   return modified_filter_object;
 }
-async function $4cf7d9829d60d844$export$79b1565500412d9b(search_modal, modal_fn_opts) {
-  const body = await (0, $3hooq$depictaiutilishared.observer).wait_for_element("body");
+async function $4cf7d9829d60d844$export$79b1565500412d9b(search_modal, modal_fn_opts, parent) {
+  const body = parent || (await (0, $3hooq$depictaiutilishared.observer).wait_for_element("body"));
   let dispose_and_remove;
   const open_modal_ = function () {
     let extra_options_for_modal = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -8977,6 +8986,7 @@ class $ddd39c5f36f49703$export$ac6237957a15b3f0 {
       disable_scrolling_during_modal = true,
       bottom_distance_under_modal: bottom_distance_under_modal,
       render_instant_card: render_instant_card,
+      override_modal_element: override_modal_element,
       ...props_on_class
     } = _ref;
     $ddd39c5f36f49703$var$_classPrivateFieldInitSpec(this, $ddd39c5f36f49703$var$_locale_signal, {
@@ -9132,7 +9142,7 @@ class $ddd39c5f36f49703$export$ac6237957a15b3f0 {
           enable_category_suggestions_: enable_category_suggestions,
           disable_scrolling_: disable_scrolling_during_modal,
           bottom_distance_under_modal_: bottom_distance_under_modal
-        });
+        }, override_modal_element);
         // This will add some default behaviour to open_modal_ if no style_props_ are supplied
         // The default behaviour is to align the modal with the input field if possible
         const modal_opening_effect = () => {

package/server/ES10/index.d.ts

@@ -7,7 +7,7 @@ import { CategorySuggestion, SearchSuggestionsResponse } from "@depict-ai/types/
 import { BaseSearchRequest } from "@depict-ai/types/api/BaseSearchRequest";
 import { SearchSuggestionsRequest } from "@depict-ai/types/api/SearchSuggestionsRequest";
 import { ProductListingRequest } from "@depict-ai/types/api/ProductListingRequest";
-export const version = "2.0.9";
+export const version = "2.0.11";
 /**
  * Returns accessor with the size of the provided element, including padding and border (I think)
  */
@@ -435,6 +435,7 @@ export type PageURLCreator<InputDisplay extends ModernDisplay, OutputDisplay ext
  * So the idea is to have a modal. It should either be rendered and exist, in which case it is in the foreground and open, or it's completely gone. This makes things easier.
  * @param search_modal a function which returns an array of nodes that get appended into <body>. This function will run in its own solid-js root which will call onCleanup and cleanup all reactive things inside it when the modal is closed. This function will get the arguments passed to open_modal_ and the modal_fn_opts merged together, along with register_closing_animation_ where an async function that resolves once the animation is finished can be provided to animate the closing of the modal
  * @param modal_fn_opts static options for the modal that won't change on a per-opening basis
+ * @param parent override the parent element to append the modal to. Defaults to <body>
  @returns a function to open and close the modal. When calling the open_modal_ function additional parameters can be passed to the modal
  */
 export function general_modal_abstraction<StaticOptions extends {
@@ -445,7 +446,7 @@ export function general_modal_abstraction<StaticOptions extends {
   close_modal_: VoidFunction;
   open_modal_: (extra_options_for_modal?: ExtraOptionsProvidedOnOpen, on_dispose?: VoidFunction) => void;
   register_closing_animation_: (animation: () => Promise<any>) => void;
-}) => Node_Array, modal_fn_opts: StaticOptions): Promise<{
+}) => Node_Array, modal_fn_opts: StaticOptions, parent?: HTMLElement | ShadowRoot): Promise<{
   open_modal_: (extra_options_for_modal?: ExtraOptionsProvidedOnOpen, on_dispose?: VoidFunction) => void;
   close_modal_: () => void;
 }>;
@@ -753,6 +754,7 @@ type GeneralConstructorOptions<InputDisplay extends Display, OutputDisplay exten
   disable_scrolling_during_modal?: boolean;
   bottom_distance_under_modal?: Accessor<number | undefined>;
   render_instant_card?: InstantCard<OutputDisplay extends ModernDisplay ? OutputDisplay : InputDisplay>;
+  override_modal_element?: HTMLElement | ShadowRoot;
 };
 type ConstructorOptionsWithApi<InputDisplay extends Display, OutputDisplay extends ModernDisplay | never> = GeneralConstructorOptions<InputDisplay, OutputDisplay> & {
   api: DepictAPI<InputDisplay, OutputDisplay>;
@@ -786,6 +788,7 @@ export class DepictSearch<InputDisplay extends Display, OutputDisplay extends Mo
     disable_scrolling_during_modal,
     bottom_distance_under_modal,
     render_instant_card,
+    override_modal_element,
     ...props_on_class
   }: ConstructorOptions<InputDisplay, OutputDisplay>);
   get enable_content_search(): boolean | undefined;

package/server/ES10/index.js

@@ -1,4 +1,4 @@
-import { add_to_version_info as $b8hua$add_to_version_info, catchify as $b8hua$catchify, slider_fractional_factory as $b8hua$slider_fractional_factory, camelCasifyObject as $b8hua$camelCasifyObject, make_random_classname as $b8hua$make_random_classname, n_col_styling_with_dist as $b8hua$n_col_styling_with_dist, layout_get_visible_recs_without_partial_rows as $b8hua$layout_get_visible_recs_without_partial_rows, layout_get_total_rec_amount_for_row as $b8hua$layout_get_total_rec_amount_for_row, layout_media_query_header as $b8hua$layout_media_query_header, report as $b8hua$report, Amazing_Slider as $b8hua$Amazing_Slider, slider_snap_css as $b8hua$slider_snap_css, slider_fading_factory as $b8hua$slider_fading_factory, observer as $b8hua$observer, is_safari as $b8hua$is_safari, useExpandingContainer as $b8hua$useExpandingContainer, standard_price_format as $b8hua$standard_price_format, dlog as $b8hua$dlog, hex_to_rgb as $b8hua$hex_to_rgb, relative_luminance_from_rgb as $b8hua$relative_luminance_from_rgb, javascript_media_query as $b8hua$javascript_media_query, fetch_recs as $b8hua$fetch_recs, snakeCasifyObject as $b8hua$snakeCasifyObject, instant_exec_on_suspect_history_change as $b8hua$instant_exec_on_suspect_history_change, base_url as $b8hua$base_url, get_depict_id as $b8hua$get_depict_id, get_user_id as $b8hua$get_user_id, get_session_id as $b8hua$get_session_id, make_url_with_query_params as $b8hua$make_url_with_query_params, fetch_retry as $b8hua$fetch_retry, add_version_query_params as $b8hua$add_version_query_params, dwarn as $b8hua$dwarn, sort_obj as $b8hua$sort_obj, edit_current_page_meta_tags as $b8hua$edit_current_page_meta_tags, use_href_accessor as $b8hua$use_href_accessor, base64_encode_unicode as $b8hua$base64_encode_unicode, base64_decode_unicode as $b8hua$base64_decode_unicode, queueMacroTask as $b8hua$queueMacroTask, make_asyncIterable_exiter as $b8hua$make_asyncIterable_exiter, href_change_ipns as $b8hua$href_change_ipns, ContainedImage as $b8hua$ContainedImage, deparallelize_no_drop as $b8hua$deparallelize_no_drop, ListenableSet as $b8hua$ListenableSet, insert_surfaces as $b8hua$insert_surfaces } from "@depict-ai/utilishared/ES10";
+import { add_to_version_info as $b8hua$add_to_version_info, catchify as $b8hua$catchify, observer as $b8hua$observer, slider_fractional_factory as $b8hua$slider_fractional_factory, camelCasifyObject as $b8hua$camelCasifyObject, make_random_classname as $b8hua$make_random_classname, n_col_styling_with_dist as $b8hua$n_col_styling_with_dist, layout_get_visible_recs_without_partial_rows as $b8hua$layout_get_visible_recs_without_partial_rows, layout_get_total_rec_amount_for_row as $b8hua$layout_get_total_rec_amount_for_row, layout_media_query_header as $b8hua$layout_media_query_header, report as $b8hua$report, Amazing_Slider as $b8hua$Amazing_Slider, slider_snap_css as $b8hua$slider_snap_css, slider_fading_factory as $b8hua$slider_fading_factory, is_safari as $b8hua$is_safari, useExpandingContainer as $b8hua$useExpandingContainer, standard_price_format as $b8hua$standard_price_format, dlog as $b8hua$dlog, hex_to_rgb as $b8hua$hex_to_rgb, relative_luminance_from_rgb as $b8hua$relative_luminance_from_rgb, javascript_media_query as $b8hua$javascript_media_query, fetch_recs as $b8hua$fetch_recs, snakeCasifyObject as $b8hua$snakeCasifyObject, instant_exec_on_suspect_history_change as $b8hua$instant_exec_on_suspect_history_change, base_url as $b8hua$base_url, get_depict_id as $b8hua$get_depict_id, get_user_id as $b8hua$get_user_id, get_session_id as $b8hua$get_session_id, make_url_with_query_params as $b8hua$make_url_with_query_params, fetch_retry as $b8hua$fetch_retry, add_version_query_params as $b8hua$add_version_query_params, dwarn as $b8hua$dwarn, sort_obj as $b8hua$sort_obj, edit_current_page_meta_tags as $b8hua$edit_current_page_meta_tags, use_href_accessor as $b8hua$use_href_accessor, base64_encode_unicode as $b8hua$base64_encode_unicode, base64_decode_unicode as $b8hua$base64_decode_unicode, queueMacroTask as $b8hua$queueMacroTask, make_asyncIterable_exiter as $b8hua$make_asyncIterable_exiter, href_change_ipns as $b8hua$href_change_ipns, ContainedImage as $b8hua$ContainedImage, deparallelize_no_drop as $b8hua$deparallelize_no_drop, ListenableSet as $b8hua$ListenableSet, insert_surfaces as $b8hua$insert_surfaces } from "@depict-ai/utilishared/ES10";
 import { createSignal as $b8hua$createSignal, onCleanup as $b8hua$onCleanup, createMemo as $b8hua$createMemo, createResource as $b8hua$createResource, Suspense as $b8hua$Suspense, Show as $b8hua$Show, createRenderEffect as $b8hua$createRenderEffect, createRoot as $b8hua$createRoot, For as $b8hua$For, getOwner as $b8hua$getOwner, runWithOwner as $b8hua$runWithOwner, createEffect as $b8hua$createEffect, createUniqueId as $b8hua$createUniqueId, untrack as $b8hua$untrack, createComputed as $b8hua$createComputed, ErrorBoundary as $b8hua$ErrorBoundary, Index as $b8hua$Index, on as $b8hua$on, batch as $b8hua$batch, createReaction as $b8hua$createReaction } from "solid-js";
 import { ssr as $b8hua$ssr, ssrHydrationKey as $b8hua$ssrHydrationKey, escape as $b8hua$escape, createComponent as $b8hua$createComponent, mergeProps as $b8hua$mergeProps, isServer as $b8hua$isServer, ssrElement as $b8hua$ssrElement, ssrClassList as $b8hua$ssrClassList, insert as $b8hua$insert, ssrAttribute as $b8hua$ssrAttribute, ssrStyle as $b8hua$ssrStyle, Dynamic as $b8hua$Dynamic } from "solid-js/web";
 import $b8hua$babelruntimehelpersclassPrivateFieldSet from "@babel/runtime/helpers/classPrivateFieldSet";
@@ -8,7 +8,7 @@ import $b8hua$babelruntimehelpersdefineProperty from "@babel/runtime/helpers/def
 /*! 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 = "2.0.9";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "2.0.11";
 
 /** @jsxImportSource solid-js */
 
@@ -21,8 +21,17 @@ function $0dc044cffe1e825b$export$9f191182275e9ef(what_to_watch) {
       setSize(width);
     }
   }));
-  resizeObserver.observe(what_to_watch);
-  $b8hua$onCleanup(() => resizeObserver.disconnect());
+  // If we start observing elements before they're in the DOM Chrome (Version 117.0.5938.92 (Official Build) (arm64)) sometimes gives us a resize event with a width of 0 and then doesn't dispatch one with the actual width once it's in the DOM. So we wait until the element is in the DOM before we start observing it.
+  const disconnect = (0, $b8hua$observer).onexists(what_to_watch, _ref => {
+    let {
+      element: element
+    } = _ref;
+    return resizeObserver.observe(element);
+  });
+  $b8hua$onCleanup(() => {
+    resizeObserver.disconnect();
+    disconnect();
+  });
   return size;
 }
 const $a9c7ba6087881ac2$var$transform_elements = sorted_cols_at_size => {
@@ -2799,8 +2808,8 @@ function $44aa24b1bb793549$var$modify_only_local_filter(local_filter_object, sel
   }
   return modified_filter_object;
 }
-async function $d5f1e6a0f9117286$export$79b1565500412d9b(search_modal, modal_fn_opts) {
-  const body = await (0, $b8hua$observer).wait_for_element("body");
+async function $d5f1e6a0f9117286$export$79b1565500412d9b(search_modal, modal_fn_opts, parent) {
+  const body = parent || (await (0, $b8hua$observer).wait_for_element("body"));
   let dispose_and_remove;
   const open_modal_ = function () {
     let extra_options_for_modal = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -8918,6 +8927,7 @@ class $eb064bc3350276c1$export$ac6237957a15b3f0 {
       disable_scrolling_during_modal = true,
       bottom_distance_under_modal: bottom_distance_under_modal,
       render_instant_card: render_instant_card,
+      override_modal_element: override_modal_element,
       ...props_on_class
     } = _ref;
     $eb064bc3350276c1$var$_classPrivateFieldInitSpec(this, $eb064bc3350276c1$var$_locale_signal, {
@@ -9073,7 +9083,7 @@ class $eb064bc3350276c1$export$ac6237957a15b3f0 {
           enable_category_suggestions_: enable_category_suggestions,
           disable_scrolling_: disable_scrolling_during_modal,
           bottom_distance_under_modal_: bottom_distance_under_modal
-        });
+        }, override_modal_element);
         // This will add some default behaviour to open_modal_ if no style_props_ are supplied
         // The default behaviour is to align the modal with the input field if possible
         const modal_opening_effect = () => {

package/server/latest/index.cjs

@@ -61,7 +61,7 @@ $parcel$export(module.exports, "defaultColsAtSize", () => $a3280f0aad997933$expo
 $parcel$export(module.exports, "defaultCategoryTitlePlugin", () => $a3280f0aad997933$export$7bf543b9d9be2c22);
 $parcel$export(module.exports, "version", () => $b757f75811f3261f$export$83d89fbfd8236492);
 /*! Depict.ai search and product listing SDK */
-const $b757f75811f3261f$export$83d89fbfd8236492 = "2.0.9";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "2.0.11";
 
 /** @jsxImportSource solid-js */
 
@@ -73,8 +73,14 @@ function $e5f442fb78c98741$export$9f191182275e9ef(what_to_watch) {
       setSize(width);
     }
   }));
-  resizeObserver.observe(what_to_watch);
-  $5vyXB$solidjs.onCleanup(() => resizeObserver.disconnect());
+  // If we start observing elements before they're in the DOM Chrome (Version 117.0.5938.92 (Official Build) (arm64)) sometimes gives us a resize event with a width of 0 and then doesn't dispatch one with the actual width once it's in the DOM. So we wait until the element is in the DOM before we start observing it.
+  const disconnect = (0, $5vyXB$depictaiutilishared.observer).onexists(what_to_watch, ({
+    element: element
+  }) => resizeObserver.observe(element));
+  $5vyXB$solidjs.onCleanup(() => {
+    resizeObserver.disconnect();
+    disconnect();
+  });
   return size;
 }
 const $4e04be41243c3d80$var$transform_elements = sorted_cols_at_size => {
@@ -2658,8 +2664,8 @@ function $70482f04605572e2$var$modify_only_local_filter(local_filter_object, sel
   }
   return modified_filter_object;
 }
-async function $9abb0a35d4b60ed3$export$79b1565500412d9b(search_modal, modal_fn_opts) {
-  const body = await (0, $5vyXB$depictaiutilishared.observer).wait_for_element("body");
+async function $9abb0a35d4b60ed3$export$79b1565500412d9b(search_modal, modal_fn_opts, parent) {
+  const body = parent || (await (0, $5vyXB$depictaiutilishared.observer).wait_for_element("body"));
   let dispose_and_remove;
   const open_modal_ = (extra_options_for_modal = {}, on_dispose) => {
     if (dispose_and_remove)
@@ -8258,6 +8264,7 @@ class $2c61e4cd8229c49a$export$ac6237957a15b3f0 {
     disable_scrolling_during_modal = true,
     bottom_distance_under_modal: bottom_distance_under_modal,
     render_instant_card: render_instant_card,
+    override_modal_element: override_modal_element,
     ...props_on_class
   }) {
     const owner = $5vyXB$solidjs.getOwner() || $5vyXB$solidjs.createRoot(() => $5vyXB$solidjs.getOwner()); // we might have an owner, if so, pass it on. Otherwise, create one so solid doesn't print warnings to the console
@@ -8380,7 +8387,7 @@ class $2c61e4cd8229c49a$export$ac6237957a15b3f0 {
           enable_category_suggestions_: enable_category_suggestions,
           disable_scrolling_: disable_scrolling_during_modal,
           bottom_distance_under_modal_: bottom_distance_under_modal
-        });
+        }, override_modal_element);
         // This will add some default behaviour to open_modal_ if no style_props_ are supplied
         // The default behaviour is to align the modal with the input field if possible
         const modal_opening_effect = () => {

package/server/latest/index.d.ts

@@ -7,7 +7,7 @@ import { CategorySuggestion, SearchSuggestionsResponse } from "@depict-ai/types/
 import { BaseSearchRequest } from "@depict-ai/types/api/BaseSearchRequest";
 import { SearchSuggestionsRequest } from "@depict-ai/types/api/SearchSuggestionsRequest";
 import { ProductListingRequest } from "@depict-ai/types/api/ProductListingRequest";
-export const version = "2.0.9";
+export const version = "2.0.11";
 /**
  * Returns accessor with the size of the provided element, including padding and border (I think)
  */
@@ -435,6 +435,7 @@ export type PageURLCreator<InputDisplay extends ModernDisplay, OutputDisplay ext
  * So the idea is to have a modal. It should either be rendered and exist, in which case it is in the foreground and open, or it's completely gone. This makes things easier.
  * @param search_modal a function which returns an array of nodes that get appended into <body>. This function will run in its own solid-js root which will call onCleanup and cleanup all reactive things inside it when the modal is closed. This function will get the arguments passed to open_modal_ and the modal_fn_opts merged together, along with register_closing_animation_ where an async function that resolves once the animation is finished can be provided to animate the closing of the modal
  * @param modal_fn_opts static options for the modal that won't change on a per-opening basis
+ * @param parent override the parent element to append the modal to. Defaults to <body>
  @returns a function to open and close the modal. When calling the open_modal_ function additional parameters can be passed to the modal
  */
 export function general_modal_abstraction<StaticOptions extends {
@@ -445,7 +446,7 @@ export function general_modal_abstraction<StaticOptions extends {
   close_modal_: VoidFunction;
   open_modal_: (extra_options_for_modal?: ExtraOptionsProvidedOnOpen, on_dispose?: VoidFunction) => void;
   register_closing_animation_: (animation: () => Promise<any>) => void;
-}) => Node_Array, modal_fn_opts: StaticOptions): Promise<{
+}) => Node_Array, modal_fn_opts: StaticOptions, parent?: HTMLElement | ShadowRoot): Promise<{
   open_modal_: (extra_options_for_modal?: ExtraOptionsProvidedOnOpen, on_dispose?: VoidFunction) => void;
   close_modal_: () => void;
 }>;
@@ -753,6 +754,7 @@ type GeneralConstructorOptions<InputDisplay extends Display, OutputDisplay exten
   disable_scrolling_during_modal?: boolean;
   bottom_distance_under_modal?: Accessor<number | undefined>;
   render_instant_card?: InstantCard<OutputDisplay extends ModernDisplay ? OutputDisplay : InputDisplay>;
+  override_modal_element?: HTMLElement | ShadowRoot;
 };
 type ConstructorOptionsWithApi<InputDisplay extends Display, OutputDisplay extends ModernDisplay | never> = GeneralConstructorOptions<InputDisplay, OutputDisplay> & {
   api: DepictAPI<InputDisplay, OutputDisplay>;
@@ -786,6 +788,7 @@ export class DepictSearch<InputDisplay extends Display, OutputDisplay extends Mo
     disable_scrolling_during_modal,
     bottom_distance_under_modal,
     render_instant_card,
+    override_modal_element,
     ...props_on_class
   }: ConstructorOptions<InputDisplay, OutputDisplay>);
   get enable_content_search(): boolean | undefined;

package/server/latest/index.js

@@ -1,11 +1,11 @@
-import { add_to_version_info as $i7OB2$add_to_version_info, catchify as $i7OB2$catchify, slider_fractional_factory as $i7OB2$slider_fractional_factory, camelCasifyObject as $i7OB2$camelCasifyObject, make_random_classname as $i7OB2$make_random_classname, n_col_styling_with_dist as $i7OB2$n_col_styling_with_dist, layout_get_visible_recs_without_partial_rows as $i7OB2$layout_get_visible_recs_without_partial_rows, layout_get_total_rec_amount_for_row as $i7OB2$layout_get_total_rec_amount_for_row, layout_media_query_header as $i7OB2$layout_media_query_header, report as $i7OB2$report, Amazing_Slider as $i7OB2$Amazing_Slider, slider_snap_css as $i7OB2$slider_snap_css, slider_fading_factory as $i7OB2$slider_fading_factory, observer as $i7OB2$observer, is_safari as $i7OB2$is_safari, useExpandingContainer as $i7OB2$useExpandingContainer, standard_price_format as $i7OB2$standard_price_format, dlog as $i7OB2$dlog, hex_to_rgb as $i7OB2$hex_to_rgb, relative_luminance_from_rgb as $i7OB2$relative_luminance_from_rgb, javascript_media_query as $i7OB2$javascript_media_query, fetch_recs as $i7OB2$fetch_recs, snakeCasifyObject as $i7OB2$snakeCasifyObject, instant_exec_on_suspect_history_change as $i7OB2$instant_exec_on_suspect_history_change, base_url as $i7OB2$base_url, get_depict_id as $i7OB2$get_depict_id, get_user_id as $i7OB2$get_user_id, get_session_id as $i7OB2$get_session_id, sort_obj as $i7OB2$sort_obj, fetch_retry as $i7OB2$fetch_retry, add_version_query_params as $i7OB2$add_version_query_params, dwarn as $i7OB2$dwarn, make_url_with_query_params as $i7OB2$make_url_with_query_params, edit_current_page_meta_tags as $i7OB2$edit_current_page_meta_tags, use_href_accessor as $i7OB2$use_href_accessor, base64_encode_unicode as $i7OB2$base64_encode_unicode, base64_decode_unicode as $i7OB2$base64_decode_unicode, queueMacroTask as $i7OB2$queueMacroTask, make_asyncIterable_exiter as $i7OB2$make_asyncIterable_exiter, href_change_ipns as $i7OB2$href_change_ipns, ContainedImage as $i7OB2$ContainedImage, deparallelize_no_drop as $i7OB2$deparallelize_no_drop, ListenableSet as $i7OB2$ListenableSet, insert_surfaces as $i7OB2$insert_surfaces } from "@depict-ai/utilishared/latest";
+import { add_to_version_info as $i7OB2$add_to_version_info, catchify as $i7OB2$catchify, observer as $i7OB2$observer, slider_fractional_factory as $i7OB2$slider_fractional_factory, camelCasifyObject as $i7OB2$camelCasifyObject, make_random_classname as $i7OB2$make_random_classname, n_col_styling_with_dist as $i7OB2$n_col_styling_with_dist, layout_get_visible_recs_without_partial_rows as $i7OB2$layout_get_visible_recs_without_partial_rows, layout_get_total_rec_amount_for_row as $i7OB2$layout_get_total_rec_amount_for_row, layout_media_query_header as $i7OB2$layout_media_query_header, report as $i7OB2$report, Amazing_Slider as $i7OB2$Amazing_Slider, slider_snap_css as $i7OB2$slider_snap_css, slider_fading_factory as $i7OB2$slider_fading_factory, is_safari as $i7OB2$is_safari, useExpandingContainer as $i7OB2$useExpandingContainer, standard_price_format as $i7OB2$standard_price_format, dlog as $i7OB2$dlog, hex_to_rgb as $i7OB2$hex_to_rgb, relative_luminance_from_rgb as $i7OB2$relative_luminance_from_rgb, javascript_media_query as $i7OB2$javascript_media_query, fetch_recs as $i7OB2$fetch_recs, snakeCasifyObject as $i7OB2$snakeCasifyObject, instant_exec_on_suspect_history_change as $i7OB2$instant_exec_on_suspect_history_change, base_url as $i7OB2$base_url, get_depict_id as $i7OB2$get_depict_id, get_user_id as $i7OB2$get_user_id, get_session_id as $i7OB2$get_session_id, sort_obj as $i7OB2$sort_obj, fetch_retry as $i7OB2$fetch_retry, add_version_query_params as $i7OB2$add_version_query_params, dwarn as $i7OB2$dwarn, make_url_with_query_params as $i7OB2$make_url_with_query_params, edit_current_page_meta_tags as $i7OB2$edit_current_page_meta_tags, use_href_accessor as $i7OB2$use_href_accessor, base64_encode_unicode as $i7OB2$base64_encode_unicode, base64_decode_unicode as $i7OB2$base64_decode_unicode, queueMacroTask as $i7OB2$queueMacroTask, make_asyncIterable_exiter as $i7OB2$make_asyncIterable_exiter, href_change_ipns as $i7OB2$href_change_ipns, ContainedImage as $i7OB2$ContainedImage, deparallelize_no_drop as $i7OB2$deparallelize_no_drop, ListenableSet as $i7OB2$ListenableSet, insert_surfaces as $i7OB2$insert_surfaces } from "@depict-ai/utilishared/latest";
 import { createSignal as $i7OB2$createSignal, onCleanup as $i7OB2$onCleanup, createMemo as $i7OB2$createMemo, createResource as $i7OB2$createResource, Suspense as $i7OB2$Suspense, Show as $i7OB2$Show, createRenderEffect as $i7OB2$createRenderEffect, createRoot as $i7OB2$createRoot, For as $i7OB2$For, getOwner as $i7OB2$getOwner, runWithOwner as $i7OB2$runWithOwner, createEffect as $i7OB2$createEffect, createUniqueId as $i7OB2$createUniqueId, untrack as $i7OB2$untrack, createComputed as $i7OB2$createComputed, ErrorBoundary as $i7OB2$ErrorBoundary, Index as $i7OB2$Index, on as $i7OB2$on, batch as $i7OB2$batch, createReaction as $i7OB2$createReaction } from "solid-js";
 import { ssr as $i7OB2$ssr, ssrHydrationKey as $i7OB2$ssrHydrationKey, escape as $i7OB2$escape, createComponent as $i7OB2$createComponent, mergeProps as $i7OB2$mergeProps, isServer as $i7OB2$isServer, ssrElement as $i7OB2$ssrElement, ssrClassList as $i7OB2$ssrClassList, insert as $i7OB2$insert, ssrAttribute as $i7OB2$ssrAttribute, ssrStyle as $i7OB2$ssrStyle, Dynamic as $i7OB2$Dynamic } from "solid-js/web";
 
 /*! 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 = "2.0.9";
+const $ec291e0010116877$export$83d89fbfd8236492 = "2.0.11";
 
 /** @jsxImportSource solid-js */
 
@@ -17,8 +17,14 @@ function $0fdb37d8ddabef25$export$9f191182275e9ef(what_to_watch) {
       setSize(width);
     }
   }));
-  resizeObserver.observe(what_to_watch);
-  $i7OB2$onCleanup(() => resizeObserver.disconnect());
+  // If we start observing elements before they're in the DOM Chrome (Version 117.0.5938.92 (Official Build) (arm64)) sometimes gives us a resize event with a width of 0 and then doesn't dispatch one with the actual width once it's in the DOM. So we wait until the element is in the DOM before we start observing it.
+  const disconnect = (0, $i7OB2$observer).onexists(what_to_watch, ({
+    element: element
+  }) => resizeObserver.observe(element));
+  $i7OB2$onCleanup(() => {
+    resizeObserver.disconnect();
+    disconnect();
+  });
   return size;
 }
 const $b5cccc8ee7d24677$var$transform_elements = sorted_cols_at_size => {
@@ -2602,8 +2608,8 @@ function $5efb5894079b220e$var$modify_only_local_filter(local_filter_object, sel
   }
   return modified_filter_object;
 }
-async function $194bd6b8e4c59830$export$79b1565500412d9b(search_modal, modal_fn_opts) {
-  const body = await (0, $i7OB2$observer).wait_for_element("body");
+async function $194bd6b8e4c59830$export$79b1565500412d9b(search_modal, modal_fn_opts, parent) {
+  const body = parent || (await (0, $i7OB2$observer).wait_for_element("body"));
   let dispose_and_remove;
   const open_modal_ = (extra_options_for_modal = {}, on_dispose) => {
     if (dispose_and_remove)
@@ -8202,6 +8208,7 @@ class $806c97b931758897$export$ac6237957a15b3f0 {
     disable_scrolling_during_modal = true,
     bottom_distance_under_modal: bottom_distance_under_modal,
     render_instant_card: render_instant_card,
+    override_modal_element: override_modal_element,
     ...props_on_class
   }) {
     const owner = $i7OB2$getOwner() || $i7OB2$createRoot(() => $i7OB2$getOwner()); // we might have an owner, if so, pass it on. Otherwise, create one so solid doesn't print warnings to the console
@@ -8324,7 +8331,7 @@ class $806c97b931758897$export$ac6237957a15b3f0 {
           enable_category_suggestions_: enable_category_suggestions,
           disable_scrolling_: disable_scrolling_during_modal,
           bottom_distance_under_modal_: bottom_distance_under_modal
-        });
+        }, override_modal_element);
         // This will add some default behaviour to open_modal_ if no style_props_ are supplied
         // The default behaviour is to align the modal with the input field if possible
         const modal_opening_effect = () => {