@depict-ai/ui 2.0.8 → 2.0.10

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.8";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "2.0.10";
 
 /** @jsxImportSource solid-js */
 
@@ -238,6 +238,7 @@ function $a73063cc642f3e5f$export$7f8bd308237ab5a5(get_displays_) {
   });
   return displays_by_key_;
 }
+const $a73063cc642f3e5f$var$result_ids = ["search_result_id", "product_listing_result_id", "recommendation_id"];
 function $a73063cc642f3e5f$export$43f0fb951fcb0c54({
   displays_by_key_: displays_by_key_,
   merchant_: merchant_,
@@ -251,17 +252,24 @@ function $a73063cc642f3e5f$export$43f0fb951fcb0c54({
     },
     children: (product_id, index) => {
       const owner = $gVhhF$solidjs.getOwner();
-      const display_accessor = $gVhhF$solidjs.createMemo(() => displays_by_key_().get(product_id));
-      const [product_card_resource] = $gVhhF$solidjs.createResource(display_accessor,
-      // re-render when the reference to the display object changes
-      // this should only be the case when the merchant or market changes and the new request has completed
-      display => {
+      const display_accessor = $gVhhF$solidjs.createMemo(prev => {
+        const new_display = displays_by_key_().get(product_id);
+        if (prev && $a73063cc642f3e5f$var$deep_equal(prev, new_display))
+          // If displays are identical, they haven't changed due to merchant/market changing OR we made a new query and the displays are the same. Return the old display (same object reference) to avoid re-rendering.
+          // This doesn't work if people mutate the displays from within the template but we hope they don't
+          // (We can't know if the display changing is due to merchant/market changing or a new query otherwise and don't want to run into https://gitlab.com/depict-ai/depict.ai/-/merge_requests/6890/diffs)
+          return prev;
+        return new_display;
+      });
+      const [product_card_resource] = $gVhhF$solidjs.createResource(() => [merchant_(), market_(), display_accessor()],
+      // re-render when the reference to the display object changes or the merchant or market changes
+      // (We don't want to re-render if nothing has changed)
+      ([merchant, market, display]) => {
         // get display in the function that re-runs when merchant or market have changed, since the display may have changed but product_id not
         return product_card_template_(display, {
           set_on_index_change: fn => $gVhhF$solidjs.runWithOwner(owner, () => $gVhhF$solidjs.createEffect(() => fn(index()))),
-          merchant: $gVhhF$solidjs.untrack(merchant_),
-          // this means that the merchant and market provided to the template is wrong while we do another fetch, but I don't see how anyone would need to know the correct market there
-          market: $gVhhF$solidjs.untrack(market_) // recommendation_grid can provide a sneaky undefined here just FYI
+          merchant: merchant,
+          market: market // recommendation_grid can provide a sneaky undefined here just FYI
         });
       });
 
@@ -276,15 +284,13 @@ function $a73063cc642f3e5f$export$43f0fb951fcb0c54({
           elements.push(element);
           // Add tracking ids
           if (!(element instanceof HTMLElement)) continue; // Apparently only HTMLElements have dataset
-          const {
-            dataset: dataset
-          } = element;
-          const {
-            search_result_id: search_result_id,
-            product_listing_result_id: product_listing_result_id,
-            recommendation_id: recommendation_id
-          } = display;
-          if (search_result_id) dataset.searchResultId = search_result_id;else if (product_listing_result_id) dataset.productListingResultId = product_listing_result_id;else if (recommendation_id) dataset.recommendationId = recommendation_id;
+          for (let i = 0; i < $a73063cc642f3e5f$var$result_ids.length; i++) {
+            const id = $a73063cc642f3e5f$var$result_ids[i];
+            const value = display[id];
+            if (value) Object.assign(element.dataset, $gVhhF$depictaiutilishared.camelCasifyObject({
+              [id]: value
+            }));
+          }
         }
         do_per_elements_?.(elements, index);
       });
@@ -292,6 +298,23 @@ function $a73063cc642f3e5f$export$43f0fb951fcb0c54({
     }
   });
 }
+// Source: https://dmitripavlutin.com/how-to-compare-objects-in-javascript/
+function $a73063cc642f3e5f$var$deep_equal(object1, object2) {
+  const keys1 = Object.keys(object1);
+  const keys2 = Object.keys(object2);
+  if (keys1.length !== keys2.length) return false;
+  for (const key of keys1) {
+    if ($a73063cc642f3e5f$var$result_ids.includes(key)) continue; // ignore result ids that change per response
+    const val1 = object1[key];
+    const val2 = object2[key];
+    const areObjects = $a73063cc642f3e5f$var$is_object(val1) && $a73063cc642f3e5f$var$is_object(val2);
+    if (areObjects && !$a73063cc642f3e5f$var$deep_equal(val1, val2) || !areObjects && val1 !== val2) return false;
+  }
+  return true;
+}
+function $a73063cc642f3e5f$var$is_object(object) {
+  return object != null && typeof object === "object";
+}
 
 // Errors caused by SDK consuming code interfacing with the SDK, not the SDK itself or other Depict packages
 class $7dd1edb2ee2b43ad$export$e1d52e4f0c7557a1 extends Error {}
@@ -654,51 +677,52 @@ function $b8e79813f4f7ebe4$export$7da560f849543dff({
 }) {
   const is_showing_something = $gVhhF$solidjs.createMemo(() => recommendations_resource_.loading || recommendations_resource_()?.length);
   const num_placeholders_ = () => 20;
+  const elements = (() => {
+    const _el$ = $gVhhF$solidjsweb.getNextElement($b8e79813f4f7ebe4$var$_tmpl$),
+      _el$2 = _el$.firstChild,
+      [_el$3, _co$] = $gVhhF$solidjsweb.getNextMarker(_el$2.nextSibling),
+      _el$4 = _el$3.nextSibling,
+      [_el$5, _co$2] = $gVhhF$solidjsweb.getNextMarker(_el$4.nextSibling);
+    $gVhhF$solidjsweb.insert(_el$, (0, $fc23d7668ae0011d$export$a2cc176055f8f08), _el$3, _co$);
+    $gVhhF$solidjsweb.insert(_el$, $gVhhF$solidjsweb.createComponent((0, $f48d0fbb00835aaa$export$d21e32dfedac04be), $gVhhF$solidjsweb.mergeProps({
+      get rows() {
+        return rows_object_();
+      },
+      layout: "grid",
+      element_attributes: {
+        class: "cards"
+      }
+    }, layout_options_, {
+      get children() {
+        return $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Suspense), {
+          get fallback() {
+            return $0caf87eaa19079da$export$f33414a4df0afd3f({
+              num_placeholders_: num_placeholders_,
+              product_card_template_: product_card_template_
+            });
+          },
+          get children() {
+            return (() => {
+              // IIFE to make sure we access both the recommendations_resource and the resources containing the product card rendering results themselves within the Suspense boundary
+              const displays_by_key_ = $a73063cc642f3e5f$export$7f8bd308237ab5a5($gVhhF$solidjs.createMemo(() => recommendations_resource_() || []));
+              return $a73063cc642f3e5f$export$43f0fb951fcb0c54({
+                displays_by_key_: displays_by_key_,
+                merchant_: merchant_,
+                market_: market_,
+                product_card_template_: product_card_template_
+              });
+            })();
+          }
+        });
+      }
+    })), _el$5, _co$2);
+    return _el$;
+  })();
   return $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
     get when() {
       return is_showing_something();
     },
-    get children() {
-      const _el$ = $gVhhF$solidjsweb.getNextElement($b8e79813f4f7ebe4$var$_tmpl$),
-        _el$2 = _el$.firstChild,
-        [_el$3, _co$] = $gVhhF$solidjsweb.getNextMarker(_el$2.nextSibling),
-        _el$4 = _el$3.nextSibling,
-        [_el$5, _co$2] = $gVhhF$solidjsweb.getNextMarker(_el$4.nextSibling);
-      $gVhhF$solidjsweb.insert(_el$, (0, $fc23d7668ae0011d$export$a2cc176055f8f08), _el$3, _co$);
-      $gVhhF$solidjsweb.insert(_el$, $gVhhF$solidjsweb.createComponent((0, $f48d0fbb00835aaa$export$d21e32dfedac04be), $gVhhF$solidjsweb.mergeProps({
-        get rows() {
-          return rows_object_();
-        },
-        layout: "grid",
-        element_attributes: {
-          class: "cards"
-        }
-      }, layout_options_, {
-        get children() {
-          return $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Suspense), {
-            get fallback() {
-              return $0caf87eaa19079da$export$f33414a4df0afd3f({
-                num_placeholders_: num_placeholders_,
-                product_card_template_: product_card_template_
-              });
-            },
-            get children() {
-              return (() => {
-                // IIFE to make sure we access both the recommendations_resource and the resources containing the product card rendering results themselves within the Suspense boundary
-                const displays_by_key_ = $a73063cc642f3e5f$export$7f8bd308237ab5a5($gVhhF$solidjs.createMemo(() => recommendations_resource_() || []));
-                return $a73063cc642f3e5f$export$43f0fb951fcb0c54({
-                  displays_by_key_: displays_by_key_,
-                  merchant_: merchant_,
-                  market_: market_,
-                  product_card_template_: product_card_template_
-                });
-              })();
-            }
-          });
-        }
-      })), _el$5, _co$2);
-      return _el$;
-    }
+    children: elements
   });
 }
 const $1f8dbf7e28b3eff2$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<button class="show-more major" type="button"></button>`, 2),
@@ -3466,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)
@@ -4304,7 +4328,7 @@ function $ac167f6af6a48fc3$export$a1fd619a4743ca08({
   const [get_extra_displays, set_extra_displays_] = $gVhhF$solidjs.createSignal([], {
     equals: false
   });
-  const displays_by_key_ = $a73063cc642f3e5f$export$7f8bd308237ab5a5($gVhhF$solidjs.createMemo(() => [...plp_results_().displays, ...get_extra_displays()]));
+  const displays_by_key_ = $a73063cc642f3e5f$export$7f8bd308237ab5a5($gVhhF$solidjs.createMemo(() => [...(plp_results_()?.displays || []), ...get_extra_displays()]));
   const percentage_in_view_ = $4117463e2939f5f4$export$63dd0350f8559dda({
     get_last_result_in_viewport_: get_last_result_in_viewport_,
     displays_by_key_: displays_by_key_,
@@ -4423,18 +4447,18 @@ function $fe76fb463cc60b89$export$3925f87b1545cfc6({
               layout_options_: layout_options_,
               sort_or_filter_open_: sort_or_filter_open_
             });
-            $gVhhF$solidjs.createComputed(() => {
-              if (!is_loading_()) return;
-              set_should_have_placeholders_rendered(true);
-              set_suspense_is_blocked(false);
-              is_just_after_plp_results_update = true;
-            });
             const block_suspense_if_needed = () => {
               if (!is_just_after_plp_results_update) return;
               is_just_after_plp_results_update = false;
               fallback_is_alive = false;
               set_suspense_is_blocked(true);
             };
+            $gVhhF$solidjs.createComputed(() => {
+              if (!is_loading_()) return;
+              set_should_have_placeholders_rendered(true);
+              set_suspense_is_blocked(false);
+              is_just_after_plp_results_update = true;
+            });
             $gVhhF$solidjs.createEffect($gVhhF$solidjs.on(plp_results_, () => {
               if (!fallback_is_alive) {
                 // if all product card rendering functions after the initial rendering are synchronous the suspense boundary will never go into the fallback, so we don't know when they have finished rendering, and we can't block the suspense. Therefore, we're just doing it with this effect
@@ -4444,6 +4468,48 @@ function $fe76fb463cc60b89$export$3925f87b1545cfc6({
             }, {
               defer: true
             }));
+            /*
+            This suspense ensures that if someone has async templates, we still show placeholders until the product cards actually have finished rendering (automagically since they're createResource's)
+            We're creating it outside the <Show> so that we can benefit from <For>'s optimisation between changing results
+            (For the whole idea of the displays being cached to work we can't tear down and re-run ProductCards for every new result.
+            We have to keep ProductCards alive, but hidden, and feed them new data as soon as we had it)
+            */
+            const product_cards_when_data = $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Suspense), {
+              get fallback() {
+                return (() => {
+                  fallback_is_alive = true;
+                  $gVhhF$solidjs.onCleanup(block_suspense_if_needed); // Block suspense after initial run every time after we fetch
+                  return $gVhhF$solidjs.createMemo(() => {
+                    // We need to be able to block the suspense since when async product cards are *rendering* we want to show the placeholders on initial load but not when loading more
+                    // In future we could have individual suspense's for each product card, but that's too much for now
+                    if (get_suspense_is_blocked()) return suspense_contents;
+                    set_should_have_placeholders_rendered(true); // just in case
+                    $gVhhF$solidjs.onCleanup(() => set_should_have_placeholders_rendered(false));
+                    return rendered_placeholders; // I lifted the placeholders into the memo since we don't want to re-render them when switching from <Show> to <Suspense>
+                  });
+                })();
+              },
+
+              get children() {
+                return (() => {
+                  suspense_contents = $ac167f6af6a48fc3$export$a1fd619a4743ca08({
+                    product_card_template_: product_card_template_,
+                    plp_results_: plp_results_,
+                    last_result_in_viewport_: last_result_in_viewport_,
+                    first_result_in_viewport_: first_result_in_viewport_,
+                    market_: market_,
+                    merchant_: merchant_,
+                    all_products_loaded_: all_products_loaded_,
+                    min_products_to_fetch_: min_products_to_fetch_,
+                    query_base_: query_base_,
+                    depict_api_: depict_api_,
+                    is_loading_: is_loading_
+                  });
+                  $gVhhF$solidjs.onCleanup(() => suspense_contents = undefined);
+                  return suspense_contents;
+                })();
+              }
+            });
             return [$gVhhF$solidjsweb.memo((0, $fc23d7668ae0011d$export$a2cc176055f8f08)), $gVhhF$solidjsweb.createComponent((0, $f48d0fbb00835aaa$export$d21e32dfedac04be), {
               get cols_at_size() {
                 return modified_cols_at_size();
@@ -4467,44 +4533,7 @@ function $fe76fb463cc60b89$export$3925f87b1545cfc6({
                   get fallback() {
                     return rendered_placeholders();
                   },
-                  get children() {
-                    return $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Suspense), {
-                      get fallback() {
-                        return (() => {
-                          fallback_is_alive = true;
-                          $gVhhF$solidjs.onCleanup(block_suspense_if_needed); // Block suspense after initial run every time after we fetch
-                          return $gVhhF$solidjs.createMemo(() => {
-                            // We need to be able to block the suspense since when async product cards are *rendering* we want to show the placeholders on initial load but not when loading more
-                            // In future we could have individual suspense's for each product card, but that's too much for now
-                            if (get_suspense_is_blocked()) return suspense_contents;
-                            set_should_have_placeholders_rendered(true); // just in case
-                            $gVhhF$solidjs.onCleanup(() => set_should_have_placeholders_rendered(false));
-                            return rendered_placeholders; // I lifted the placeholders into the memo since we don't want to re-render them when switching from <Show> to <Suspense>
-                          });
-                        })();
-                      },
-
-                      get children() {
-                        return (() => {
-                          suspense_contents = $ac167f6af6a48fc3$export$a1fd619a4743ca08({
-                            product_card_template_: product_card_template_,
-                            plp_results_: plp_results_,
-                            last_result_in_viewport_: last_result_in_viewport_,
-                            first_result_in_viewport_: first_result_in_viewport_,
-                            market_: market_,
-                            merchant_: merchant_,
-                            all_products_loaded_: all_products_loaded_,
-                            min_products_to_fetch_: min_products_to_fetch_,
-                            query_base_: query_base_,
-                            depict_api_: depict_api_,
-                            is_loading_: is_loading_
-                          });
-                          $gVhhF$solidjs.onCleanup(() => suspense_contents = undefined);
-                          return suspense_contents;
-                        })();
-                      }
-                    });
-                  }
+                  children: product_cards_when_data
                 });
               }
             })];
@@ -7513,58 +7542,61 @@ function $fb29c6201c369e39$export$7de92c4c2205ebf3({
   product_card_template_: product_card_template_,
   showing_recommendation_rows_: showing_recommendation_rows_,
   view_more_button_ = true,
-  layout_options_: layout_options_
+  layout_options_: layout_options_,
+  all_products_loaded_: all_products_loaded_
 }) {
   const [get_showing_recommendation_rows] = showing_recommendation_rows_; // We reset this in after_submit in search.tsx FYI
   const rows_object = view_more_button_ ? $fb29c6201c369e39$var$make_state_saved_rows(showing_recommendation_rows_, i18n_) : "all";
   const [recommendations_resource] = $gVhhF$solidjs.createResource(search_query_base_, query => depict_api_.get_recommended(query).then(r => r.displays));
   const is_showing_something = $gVhhF$solidjs.createMemo(() => recommendations_resource.loading || recommendations_resource()?.length);
   const num_placeholders_ = $gVhhF$solidjs.createMemo(() => (0, $aec24316ed262dc0$export$6c9030e511152266) + get_showing_recommendation_rows() * Math.max(...layout_options_().cols_at_size.map(([per_column]) => per_column)));
+  // Don't tear down elements every time one updates the page - don't put them within <Show>
+  const elements = (() => {
+    const _el$ = $gVhhF$solidjsweb.getNextElement($fb29c6201c369e39$var$_tmpl$),
+      _el$2 = _el$.firstChild,
+      _el$3 = _el$2.nextSibling,
+      [_el$4, _co$] = $gVhhF$solidjsweb.getNextMarker(_el$3.nextSibling),
+      _el$5 = _el$4.nextSibling,
+      [_el$6, _co$2] = $gVhhF$solidjsweb.getNextMarker(_el$5.nextSibling);
+    $gVhhF$solidjsweb.insert(_el$2, () => i18n_.search_recs_title_());
+    $gVhhF$solidjsweb.insert(_el$, (0, $fc23d7668ae0011d$export$a2cc176055f8f08), _el$4, _co$);
+    $gVhhF$solidjsweb.insert(_el$, $gVhhF$solidjsweb.createComponent((0, $f48d0fbb00835aaa$export$d21e32dfedac04be), $gVhhF$solidjsweb.mergeProps({
+      rows: rows_object,
+      layout: "grid",
+      element_attributes: {
+        class: "cards"
+      }
+    }, layout_options_, {
+      get children() {
+        return $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Suspense), {
+          get fallback() {
+            return $0caf87eaa19079da$export$f33414a4df0afd3f({
+              num_placeholders_: num_placeholders_,
+              product_card_template_: product_card_template_
+            });
+          },
+          get children() {
+            return (() => {
+              // IIFE to make sure we access both the recommendations_resource and the resources containing the product card rendering results themselves within the Suspense boundary
+              const displays_by_key_ = $a73063cc642f3e5f$export$7f8bd308237ab5a5($gVhhF$solidjs.createMemo(() => recommendations_resource() || []));
+              return $a73063cc642f3e5f$export$43f0fb951fcb0c54({
+                displays_by_key_: displays_by_key_,
+                merchant_: $gVhhF$solidjs.createMemo(() => search_query_base_().tenant),
+                market_: $gVhhF$solidjs.createMemo(() => search_query_base_().market),
+                product_card_template_: product_card_template_
+              });
+            })();
+          }
+        });
+      }
+    })), _el$6, _co$2);
+    return _el$;
+  })();
   return $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
     get when() {
-      return is_showing_something();
+      return $gVhhF$solidjsweb.memo(() => !!is_showing_something())() && all_products_loaded_();
     },
-    get children() {
-      const _el$ = $gVhhF$solidjsweb.getNextElement($fb29c6201c369e39$var$_tmpl$),
-        _el$2 = _el$.firstChild,
-        _el$3 = _el$2.nextSibling,
-        [_el$4, _co$] = $gVhhF$solidjsweb.getNextMarker(_el$3.nextSibling),
-        _el$5 = _el$4.nextSibling,
-        [_el$6, _co$2] = $gVhhF$solidjsweb.getNextMarker(_el$5.nextSibling);
-      $gVhhF$solidjsweb.insert(_el$2, () => i18n_.search_recs_title_());
-      $gVhhF$solidjsweb.insert(_el$, (0, $fc23d7668ae0011d$export$a2cc176055f8f08), _el$4, _co$);
-      $gVhhF$solidjsweb.insert(_el$, $gVhhF$solidjsweb.createComponent((0, $f48d0fbb00835aaa$export$d21e32dfedac04be), $gVhhF$solidjsweb.mergeProps({
-        rows: rows_object,
-        layout: "grid",
-        element_attributes: {
-          class: "cards"
-        }
-      }, layout_options_, {
-        get children() {
-          return $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Suspense), {
-            get fallback() {
-              return $0caf87eaa19079da$export$f33414a4df0afd3f({
-                num_placeholders_: num_placeholders_,
-                product_card_template_: product_card_template_
-              });
-            },
-            get children() {
-              return (() => {
-                // IIFE to make sure we access both the recommendations_resource and the resources containing the product card rendering results themselves within the Suspense boundary
-                const displays_by_key_ = $a73063cc642f3e5f$export$7f8bd308237ab5a5($gVhhF$solidjs.createMemo(() => recommendations_resource() || []));
-                return $a73063cc642f3e5f$export$43f0fb951fcb0c54({
-                  displays_by_key_: displays_by_key_,
-                  merchant_: $gVhhF$solidjs.createMemo(() => search_query_base_().tenant),
-                  market_: $gVhhF$solidjs.createMemo(() => search_query_base_().market),
-                  product_card_template_: product_card_template_
-                });
-              })();
-            }
-          });
-        }
-      })), _el$6, _co$2);
-      return _el$;
-    }
+    children: elements
   });
 }
 function $fb29c6201c369e39$var$make_state_saved_rows([get_showing_recommendation_rows, set_showing_recommendation_rows], i18n_) {
@@ -9999,9 +10031,7 @@ function $f1d7cb69f839a526$export$a54ec244c8863715({
       }
     }), _el$19, _co$8);
     $gVhhF$solidjsweb.insert(_el$7, $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
-      get when() {
-        return get_all_products_loaded() && !disable_search_recommendations_;
-      },
+      when: !disable_search_recommendations_,
       keyed: false,
       get children() {
         return $gVhhF$solidjsweb.createComponent((0, $edafe91daf3091d7$export$b69d0d92862de18b), {
@@ -10017,7 +10047,8 @@ function $f1d7cb69f839a526$export$a54ec244c8863715({
               },
               showing_recommendation_rows_: showing_recommendation_rows_,
               view_more_button_: search_recs_view_more_,
-              product_card_template_: product_card_template_
+              product_card_template_: product_card_template_,
+              all_products_loaded_: get_all_products_loaded
             });
           }
         });
@@ -10127,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
@@ -10249,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.8";
+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;