@depict-ai/ui 2.0.9 → 2.0.10

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.10";
 
 /** @jsxImportSource solid-js */
 
@@ -3727,8 +3727,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 +10942,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 +11098,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.10";
 /**
  * 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

@@ -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.10";
 
 /** @jsxImportSource solid-js */
 
@@ -3668,8 +3668,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 +10883,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 +11039,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.10";
 
 /** @jsxImportSource solid-js */
 
@@ -3490,8 +3490,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 +10158,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 +10281,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.10";
 /**
  * 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

@@ -5,7 +5,7 @@ import { template as $9HbP8$template, getNextElement as $9HbP8$getNextElement, i
 /*! 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.10";
 
 /** @jsxImportSource solid-js */
 
@@ -3434,8 +3434,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 +10102,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 +10225,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.10",
   "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.10";
 
 /** @jsxImportSource solid-js */
 
@@ -2858,8 +2858,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 +8977,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 +9133,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.10";
 /**
  * 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

@@ -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.10";
 
 /** @jsxImportSource solid-js */
 
@@ -2799,8 +2799,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 +8918,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 +9074,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.10";
 
 /** @jsxImportSource solid-js */
 
@@ -2658,8 +2658,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 +8258,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 +8381,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.10";
 /**
  * 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

@@ -5,7 +5,7 @@ import { ssr as $i7OB2$ssr, ssrHydrationKey as $i7OB2$ssrHydrationKey, escape as
 /*! 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.10";
 
 /** @jsxImportSource solid-js */
 
@@ -2602,8 +2602,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 +8202,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 +8325,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 = () => {