@depict-ai/ui 4.10.10 → 4.10.12

package/latest/index.d.ts

@@ -11,7 +11,7 @@ import { GetListingRequest } from "@depict-ai/types/api/GetListingRequest";
 import { BaseSearchRequestV3 } from "@depict-ai/types/api/BaseSearchRequestV3";
 import { FeaturedInDisplay } from "@depict-ai/types/api/FeaturedInResponseV3";
 import { SearchFilter as _SearchFilter3 } from "@depict-ai/types/api/SearchRequestV2";
-export const version = "4.10.10";
+export const version = "4.10.12";
 /**
  * Use `javascript_media_query` but return a reactive accessor instead of taking a callback function
  */
@@ -632,14 +632,19 @@ export function ShopifyContainedImage(props: {
   class?: string;
   imgProps?: Omit<Parameters<typeof ShopifyResponsiveImg>[0], "size" | "src">;
 }): HTMLDivElement;
+export type ImageResizer = (url: string, width: number) => string;
 /**
  * Hacks ShopifyContainedImage work even for non-shopify image urls by forcing the format to be WebP
  */
-export function ModernResponsiveContainedImage(props: Parameters<typeof ShopifyContainedImage>[0]): import("solid-js").JSX.Element;
+export function ModernResponsiveContainedImage(props: Parameters<typeof ShopifyContainedImage>[0] & {
+  imageResizer_?: ImageResizer;
+}): import("solid-js").JSX.Element;
 /**
  * Wrapper around ShopifyResponsiveImg (component that just does an image, without wrapping in div). The wrapper allows ShopifyResponsiveImg to work both with shopify CDN URLs and arbitrary URLs, where the latter will be fed through Depict's cloudflare resizer.
  */
-export function ModernResponsiveImage(props: Parameters<typeof ShopifyResponsiveImg>[0]): import("solid-js").JSX.Element;
+export function ModernResponsiveImage(props: Parameters<typeof ShopifyResponsiveImg>[0] & {
+  imageResizer_?: ImageResizer;
+}): import("solid-js").JSX.Element;
 export function CrossIcon(props?: JSX.SvgSVGAttributes<SVGSVGElement>): SVGElement;
 /**
  * Symbol used to identify the version of a SearchModal function. Values right now: 1 = 1st gen classic modal, 2 = second gen modal
@@ -730,7 +735,8 @@ declare function RawSearchModalV2<InputDisplay extends Display, OutputDisplay ex
   sorting_query_param_,
   filter_query_param_prefix_,
   setSearchFieldOuterWidth_,
-  forceUseDiv_
+  forceUseDiv_,
+  imageResizer_
 }: {
   search_field_value_: Signal<string>;
   get_search_query_: Accessor<string>;
@@ -767,6 +773,7 @@ declare function RawSearchModalV2<InputDisplay extends Display, OutputDisplay ex
   enable_category_suggestions_?: boolean;
   dont_sync_search_field_value_except_on_submit_?: boolean;
   content_search_enabled_: Accessor<boolean>;
+  imageResizer_?: ImageResizer;
 }): HTMLDivElement[];
 export const SearchModalV2: typeof RawSearchModalV2;
 /**
@@ -855,6 +862,13 @@ export type BaseProviderConfig<InputDisplay extends Display, PossibleTransformed
    * We recommend to just use an incrementing number for this, e.g. "1", "2", "3", ...
    */
   uniqueInstanceKeyForState?: string;
+  /**
+   * Optional function to override the default image resizing CDN. When provided, this function is called
+   * with the original image URL and desired width, and should return the resized image URL.
+   * By default, Depict uses Cloudflare's image resizer for non-Shopify images, and Shopify's built-in
+   * resizer for Shopify CDN images.
+   */
+  imageResizer?: (url: string, width: number) => string;
 } & (InputDisplay extends ModernDisplay ? "page_url" extends keyof InputDisplay["variant_displays"][number] ? {
   /**
    * Functions that take in a list of categories, content search results or products and then can transform or enrich the data for each category, content search result or product card in a batched way.
@@ -1150,7 +1164,8 @@ export function LookCard({
   placeholderImageAspectRatio_,
   animationDuration_,
   priceFormatting_,
-  pseudoRouter_
+  pseudoRouter_,
+  imageResizer_
 }: {
   display_: Accessor<FeaturedInDisplay | null>;
   FavoriteButton_?: (props: {
@@ -1161,6 +1176,7 @@ export function LookCard({
   expandedLooksSignal_: Signal<Set<symbol>>;
   priceFormatting_: Accessor<plp_shared_i18n["price_formatting_"]>;
   pseudoRouter_: PseudoRouter;
+  imageResizer_?: ImageResizer;
 }): JSX.Element;
 /**
  * Render a grid with provided recommendations. displayTransformers will not be applied for this since you yourself provide the displays. Options are reactive.
@@ -1193,6 +1209,7 @@ export function LooksSliderOrGrid(props: {
   };
   onNavigation_?: OnNavigation;
   priceFormatting_: plp_shared_i18n["price_formatting_"];
+  imageResizer_?: (url: string, width: number) => string;
 }): HTMLDivElement;
 export const prefixes_to_preserve_in_history_dot_state: Set<string>;
 /**
@@ -1427,6 +1444,7 @@ type GeneralConstructorOptions<InputDisplay extends Display, OutputDisplay exten
   enable_content_search?: boolean;
   unique_instance_key_for_state?: string;
   searchModalComponent: typeof SearchModalV2<InputDisplay, OutputDisplay> | typeof ClassicSearchModal;
+  imageResizer_?: (url: string, width: number) => string;
   disable_scrolling_during_modal?: boolean;
   bottom_distance_under_modal?: Accessor<number | undefined>;
   override_modal_element?: HTMLElement | ShadowRoot;
@@ -1462,6 +1480,7 @@ export class DepictSearch<InputDisplay extends Display, OutputDisplay extends Mo
     display_transformers,
     api,
     searchModalComponent,
+    imageResizer_,
     disable_scrolling_during_modal,
     bottom_distance_under_modal,
     override_modal_element,
@@ -1541,7 +1560,7 @@ type OpenModalParams<OriginalDisplay extends Display, OutputDisplay extends Mode
  * Open the modal with support for alignment.
  * @returns {void}
  */
-export const open_modal_with_alignment: <OriginalDisplay extends Display, OutputDisplay extends unknown>(openModalParams: OpenModalParams<OriginalDisplay, OutputDisplay>) => void;
+export const open_modal_with_alignment: <OriginalDisplay extends Display, OutputDisplay extends ModernDisplay>(openModalParams: OpenModalParams<OriginalDisplay, OutputDisplay>) => void;
 export function open_search_with_shift_slash(open_search: VoidFunction): () => void;
 export interface PageReplacer {
   readonly render_: () => Node_Array;
@@ -1623,5 +1642,6 @@ export function CategoryPage<OriginalDisplay extends Display, OutputDisplay exte
   filterModalParent_?: HTMLElement | ShadowRoot;
   showSliderArrow_?: boolean;
   hideCount0FilterOptions_?: boolean;
-}): import("@depict-ai/utilishared").Node_Array;
+  imageResizer_?: (url: string, width: number) => string;
+}): import("@depict-ai/utilishared/latest").Node_Array;
 export type { SearchFilter } from "@depict-ai/types/api/SearchRequestV3";

package/latest/index.js

@@ -7,7 +7,7 @@ import { createStore as $9HbP8$createStore, reconcile as $9HbP8$reconcile } from
 /*! Depict.ai search and product listing SDK */
 import { register_es_version } from "../multi_import_deduplicator.mjs";
 register_es_version("ui", "latest");
-const $ec291e0010116877$export$83d89fbfd8236492 = "4.10.10";
+const $ec291e0010116877$export$83d89fbfd8236492 = "4.10.12";
 function $dc9262ef6f786812$export$d9f36cf74e24d595(media_query) {
   const signal = $9HbP8$createSignal(false);
   $9HbP8$onCleanup($9HbP8$javascript_media_query(media_query, ({
@@ -7480,7 +7480,7 @@ function $660070e2a394b3c3$export$e4b984597b71e989(props) {
   })));
   return container;
 }
-const $70bb27cc6be01fc7$var$customUrls = (url, width) => {
+const $70bb27cc6be01fc7$var$defaultCustomUrls = (url, width) => {
   if (url?.startsWith?.("https://cdn.shopify.com"))
     // The shopify image resizing CDN blocks Cloudflare's image resizer. It's possible that we can't detect shopify image URLs sometimes because they go to the merchant's domain,
     // but it seems like the URLs returned by the Depict API always goes to the cdn.shopify.com version of an image, so this simple workaround works.
@@ -7489,18 +7489,21 @@ const $70bb27cc6be01fc7$var$customUrls = (url, width) => {
   return `https://app.depict.ai/cdn-cgi/image/width=${width},format=auto/${url}`;
 };
 function $70bb27cc6be01fc7$export$9d4a4b669b1929ab(props) {
+  const resolvedCustomUrls = props.imageResizer_ ?? $70bb27cc6be01fc7$var$defaultCustomUrls;
   return $9HbP8$createComponent((0, $660070e2a394b3c3$export$e4b984597b71e989), $9HbP8$mergeProps1(props, {
     get imgProps() {
       return {
         ...props.imgProps,
-        customUrls: $70bb27cc6be01fc7$var$customUrls
+        customUrls: resolvedCustomUrls
       };
     }
   }));
 }
 function $70bb27cc6be01fc7$export$140423fa4bfb6d63(props) {
   return $9HbP8$createComponent((0, $e8ffe11ed01df0fe$export$6e5611bc7e57e477), $9HbP8$mergeProps1(props, {
-    customUrls: $70bb27cc6be01fc7$var$customUrls
+    get customUrls() {
+      return props.imageResizer_ ?? $70bb27cc6be01fc7$var$defaultCustomUrls;
+    }
   }));
 }
 let $e422ea9eccb7892b$var$cachedHlsModule;
@@ -7525,7 +7528,8 @@ function $f916989c4b1be9f7$export$780a853d15174484({
   router_: router_,
   setAspectRatioWas_: setAspectRatioWas_,
   mediaUrl_: mediaUrl_,
-  aspectRatioWhenAloneInRow_: aspectRatioWhenAloneInRow_
+  aspectRatioWhenAloneInRow_: aspectRatioWhenAloneInRow_,
+  imageResizer_: imageResizer_
 }) {
   let wroteAspectRatioToContainer = false; // Only write this once so we don't get into a aspect ratio changed -> size changed -> image source changed -> aspect ratio slightly changed infinite loop
   const [wrapperSize, setWrapperSize] = $9HbP8$createSignal();
@@ -7575,7 +7579,8 @@ function $f916989c4b1be9f7$export$780a853d15174484({
                 src: mediaUrl_,
                 "class": "d-standard-content",
                 onDecoded: () => setHasLoaded(true),
-                ref: el => el.addEventListener("load", $9HbP8$catchify(() => setAspectRatio(el.naturalWidth / el.naturalHeight)))
+                ref: el => el.addEventListener("load", $9HbP8$catchify(() => setAspectRatio(el.naturalWidth / el.naturalHeight))),
+                imageResizer_: imageResizer_
               });
             }
           }), $9HbP8$createComponent((0, $9HbP8$Match), {
@@ -7626,7 +7631,7 @@ function $f916989c4b1be9f7$export$780a853d15174484({
     }
   }));
 }
-function $486360b09f0d5729$export$7a92d995f1bf3592(history_content_blocks_, plp_meta, content_blocks_by_row_, router_, products_request_loading_) {
+function $486360b09f0d5729$export$7a92d995f1bf3592(history_content_blocks_, plp_meta, content_blocks_by_row_, router_, products_request_loading_, imageResizer_) {
   let hasSeenContentBlock = false;
   const [historyContentBlocks, setHistoryContentBlocks] = history_content_blocks_;
   const contentComponents = new Map();
@@ -7681,7 +7686,8 @@ function $486360b09f0d5729$export$7a92d995f1bf3592(history_content_blocks_, plp_
               ...prev.aspectRatios,
               [componentCacheKey]: Math.round(aspectRatio * 100) / 100
             }
-          }))
+          })),
+          imageResizer_: imageResizer_
         });
         contentComponents.set(componentCacheKey, component);
       }
@@ -7743,7 +7749,8 @@ function $df5d81d0fe61ff21$export$f7d2f673fc2f091d({
   filterModalParent_: filterModalParent_,
   showSliderArrow_: showSliderArrow_,
   hideCount0FilterOptions_: hideCount0FilterOptions_,
-  switchToFiltersDrawerBreakpoint_: switchToFiltersDrawerBreakpoint_
+  switchToFiltersDrawerBreakpoint_: switchToFiltersDrawerBreakpoint_,
+  imageResizer_: imageResizer_
 }) {
   let results_for;
   let only_show_filters_opener_;
@@ -7839,7 +7846,7 @@ function $df5d81d0fe61ff21$export$f7d2f673fc2f091d({
     setMetaRequestsForQuery(prev => prev.set(query.id_type_ + query.id_to_query_for_, listing));
     return result;
   }));
-  const contentBlocksByRow = $486360b09f0d5729$export$7a92d995f1bf3592(history_content_blocks_, plp_meta, content_blocks_by_row_, router_, () => plp_products_.loading);
+  const contentBlocksByRow = $486360b09f0d5729$export$7a92d995f1bf3592(history_content_blocks_, plp_meta, content_blocks_by_row_, router_, () => plp_products_.loading, imageResizer_);
   const countOfProductsForUI = $3ef0154d1cf118ed$export$a86bc18439445599(plp_products_, all_products_loaded_, currentlyLoadedDisplays);
   const available_sortings_ = $9HbP8$createMemo(() => plp_products_()?.sorts?.map(sort => ({
     ...sort,
@@ -8391,7 +8398,8 @@ function $08a49ecdcd5beaca$export$b73ed90f0ee50dc3({
   outerRef_: outerRef_,
   animationDuration_: animationDuration_,
   priceFormatting_: priceFormatting_,
-  pseudoRouter_: pseudoRouter_
+  pseudoRouter_: pseudoRouter_,
+  imageResizer_: imageResizer_
 }) {
   const variantToUse = $9HbP8$createMemo(() => {
     const display = display_();
@@ -8465,7 +8473,8 @@ function $08a49ecdcd5beaca$export$b73ed90f0ee50dc3({
               },
               imgProps: {
                 keyRatioUpdating: true
-              }
+              },
+              imageResizer_: imageResizer_
             });
           }
         }));
@@ -8666,7 +8675,8 @@ function $11fb4b33b36ecfac$export$ebf0b1d4f90c09ae({
   supportsHover_: supportsHover_,
   priceFormatting_: priceFormatting_,
   pseudoRouter_: pseudoRouter_,
-  containerHeight_: containerHeight_
+  containerHeight_: containerHeight_,
+  imageResizer_: imageResizer_
 }) {
   let isAffectedByChromeBug = false;
   // If the user requests the drawer to be expanded or not
@@ -8731,6 +8741,7 @@ function $11fb4b33b36ecfac$export$ebf0b1d4f90c09ae({
                 userWantsExpandedSignal_: userWantsExpandedSignal_,
                 textFadeInAnimationRunning_: textFadeInAnimationRunning,
                 priceFormatting_: priceFormatting_,
+                imageResizer_: imageResizer_,
                 outerRef_: el => $9HbP8$createEffect(() => {
                   if (index !== 0) return;
                   const resizeObserver = new ResizeObserver($9HbP8$catchify1(records => setLookItemHeight(records.at(-1).contentRect.height)));
@@ -8789,7 +8800,8 @@ function $e9d1d09be9e6471e$export$44809a8a3e867e30({
   placeholderImageAspectRatio_: placeholderImageAspectRatio_,
   animationDuration_: animationDuration_,
   priceFormatting_: priceFormatting_,
-  pseudoRouter_: pseudoRouter_
+  pseudoRouter_: pseudoRouter_,
+  imageResizer_: imageResizer_
 }) {
   let container;
   const useWantsExpandedSignal_ = $9HbP8$createSignal(false);
@@ -8876,7 +8888,8 @@ function $e9d1d09be9e6471e$export$44809a8a3e867e30({
             return display_()?.image_urls?.[0];
           },
           aspectRatio: placeholderImageAspectRatio_,
-          autoAdjustAspectRatio: true
+          autoAdjustAspectRatio: true,
+          imageResizer_: imageResizer_
         });
       }
     }), _el$3, _co$);
@@ -8889,7 +8902,8 @@ function $e9d1d09be9e6471e$export$44809a8a3e867e30({
       FavoriteButton_: FavoriteButton_,
       priceFormatting_: priceFormatting_,
       pseudoRouter_: pseudoRouter_,
-      containerHeight_: containerHeight_
+      containerHeight_: containerHeight_,
+      imageResizer_: imageResizer_
     }), _el$5, _co$2);
     $9HbP8$effect(() => _el$.classList.toggle("placeholder", !display_()));
     $9HbP8$runHydrationEvents();
@@ -9149,7 +9163,8 @@ function $07ef910e8ef6b783$export$2c9f9bf2092486aa(props) {
         animationDuration_: expandingAnimationDuration,
         expandedLooksSignal_: $07ef910e8ef6b783$var$expandedLooksSignal_,
         priceFormatting_: () => props.priceFormatting_,
-        pseudoRouter_: pseudoRouter
+        pseudoRouter_: pseudoRouter,
+        imageResizer_: props.imageResizer_
       }),
       recommendations_resource_: looksResource,
       title_: () => props.title_,
@@ -11032,7 +11047,8 @@ function $4ce5b8892775b62d$export$67152d26d4f56ee8({
   merchant_: merchant_,
   keyboardNavigationGroupIndex_: keyboardNavigationGroupIndex_,
   index_: index_,
-  selected_index_: [read_selected_index_, write_selected_index_]
+  selected_index_: [read_selected_index_, write_selected_index_],
+  imageResizer_: imageResizer_
 }) {
   const href = $9HbP8$createMemo(() => listing_()?.page_url); // <- could be made reactive getter created in displayTransformers, read it in memo here since it might create computations (for example in the preview-brower), and there's no owner in the onClick handler
   const LinkToListing = props => (() => {
@@ -11088,7 +11104,8 @@ function $4ce5b8892775b62d$export$67152d26d4f56ee8({
       get children() {
         var _el$3 = $9HbP8$getNextElement($4ce5b8892775b62d$var$_tmpl$2);
         $9HbP8$insert(_el$3, $9HbP8$createComponent($4ce5b8892775b62d$export$ea41102db9bd68c3, {
-          image_urls_: image_urls
+          image_urls_: image_urls,
+          imageResizer_: imageResizer_
         }));
         return _el$3;
       }
@@ -11131,7 +11148,8 @@ function $4ce5b8892775b62d$export$67152d26d4f56ee8({
   })();
 }
 function $4ce5b8892775b62d$export$ea41102db9bd68c3({
-  image_urls_: image_urls_
+  image_urls_: image_urls_,
+  imageResizer_: imageResizer_
 }) {
   return $9HbP8$createComponent((0, $9HbP8$Show), {
     get when() {
@@ -11154,7 +11172,8 @@ function $4ce5b8892775b62d$export$ea41102db9bd68c3({
               },
               imgProps: {
                 style: "object-fit: cover;"
-              }
+              },
+              imageResizer_: imageResizer_
             })
           });
         }
@@ -11184,7 +11203,8 @@ function $44f30a4222ce604b$export$c8d7e00464029b45({
   selected_index_: selected_index_,
   modalLayoutStacked_: modalLayoutStacked_,
   showPlaceholders_: showPlaceholders_,
-  currently_showing_suggestions_: [, set_currently_showing_suggestions]
+  currently_showing_suggestions_: [, set_currently_showing_suggestions],
+  imageResizer_: imageResizer_
 }) {
   const listings_by_id = $9HbP8$createMemo(() => Object.fromEntries((listing_suggestions_() || []).map(listing => [listing.listing_id, listing])));
   const productCards = $9HbP8$createComponent((0, $9HbP8$For), {
@@ -11202,7 +11222,8 @@ function $44f30a4222ce604b$export$c8d7e00464029b45({
         merchant_: merchant_,
         keyboardNavigationGroupIndex_: itemIndex_,
         index_: index,
-        selected_index_: selected_index_
+        selected_index_: selected_index_,
+        imageResizer_: imageResizer_
       });
     }
   });
@@ -11584,7 +11605,8 @@ function $500a16dd18ee5a71$var$RawSearchModalV2({
   sorting_query_param_: sorting_query_param_,
   filter_query_param_prefix_: filter_query_param_prefix_,
   setSearchFieldOuterWidth_: setSearchFieldOuterWidth_,
-  forceUseDiv_: forceUseDiv_
+  forceUseDiv_: forceUseDiv_,
+  imageResizer_: imageResizer_
 }) {
   let on_enter_in_search_field_function;
   let listingSuggestionsDebounceTimeout;
@@ -11795,7 +11817,8 @@ function $500a16dd18ee5a71$var$RawSearchModalV2({
               },
               imgProps: {
                 alt: "Product image"
-              }
+              },
+              imageResizer_: imageResizer_
             }),
             ...instant_results_options_
           }), _el$4, _co$);
@@ -11826,7 +11849,8 @@ function $500a16dd18ee5a71$var$RawSearchModalV2({
                 selected_index_: selected_index_,
                 currently_showing_suggestions_: currently_showing_suggestions_,
                 modalLayoutStacked_: modalLayoutStacked_,
-                showPlaceholders_: () => !suggestions_response_.latest
+                showPlaceholders_: () => !suggestions_response_.latest,
+                imageResizer_: imageResizer_
               });
             }
           });
@@ -14924,6 +14948,7 @@ class $806c97b931758897$export$ac6237957a15b3f0 {
     display_transformers: display_transformers,
     api: api,
     searchModalComponent: searchModalComponent,
+    imageResizer_: imageResizer_,
     // Stuff needed for non-standard customer deployments that we shouldn't actually expose
     disable_scrolling_during_modal = true,
     bottom_distance_under_modal: bottom_distance_under_modal,
@@ -15054,6 +15079,7 @@ class $806c97b931758897$export$ac6237957a15b3f0 {
           },
           i18n_: i18n_,
           enable_category_suggestions_: enable_category_suggestions,
+          imageResizer_: imageResizer_,
           disable_scrolling_: disable_scrolling_during_modal,
           bottom_distance_under_modal_: bottom_distance_under_modal
         }, override_modal_element);
@@ -15837,7 +15863,8 @@ function $442f32a4d80abbde$export$e2bf8ce7779e827e(props) {
       product_card_template_: product_card_template,
       sorting_query_param_: sorting_query_param_,
       filter_query_param_prefix_: filter_query_param_prefix_,
-      switchToFiltersDrawerBreakpoint_: () => props.switchToFiltersDrawerBreakpoint_
+      switchToFiltersDrawerBreakpoint_: () => props.switchToFiltersDrawerBreakpoint_,
+      imageResizer_: props.imageResizer_
     });
   }, "Entire CategoryPage failed");
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depict-ai/ui",
-  "version": "4.10.10",
+  "version": "4.10.12",
   "description": "Base package containing the actual UI of Depict UI along with translations, with a not-simplified API. We recommend using @depict-ai/js-ui or @depict-ai/react-ui instead.",
   "packageManager": "yarn@3.2.2",
   "sass": "styles.scss",
@@ -236,10 +236,10 @@
     "@babel/plugin-transform-typescript": "^7.22.9",
     "@babel/runtime": "latest",
     "@babel/runtime-corejs3": "^7.22.6",
-    "@depict-ai/plp-styling": "^4.6.2",
-    "@depict-ai/types": "^5.6.0",
-    "@depict-ai/utilishared": "^2.6.0",
-    "solid-js": "^1.9.3"
+    "@depict-ai/plp-styling": "^4.6.4",
+    "@depict-ai/types": "^5.6.2",
+    "@depict-ai/utilishared": "^2.6.2",
+    "solid-js": "^1.9.10"
   },
   "type": "module",
   "types": "ES10/index.d.ts",