@depict-ai/ui 4.7.33 → 4.7.34

package/server/latest/index.d.ts

@@ -1,8 +1,8 @@
+import { JSX, Accessor, Setter, Signal } from "solid-js";
 import { Display, ModernDisplay, report, Amazing_Slider, useExpandingContainer, ColsAtSize, Elem, Node_Array } from "@depict-ai/utilishared/latest";
 import { ContentLink, SearchResponse, SearchFilter as _SearchFilter1 } from "@depict-ai/types/api/SearchResponse";
 import { Ancestors, ListingSuggestion, SearchSuggestionsResponseV3 } from "@depict-ai/types/api/SearchSuggestionsResponseV3";
 import { ProductListing, GetListingResponse, ContentBlock as _ContentBlock1 } from "@depict-ai/types/api/GetListingResponse";
-import { JSX, Accessor, Setter, Signal } from "solid-js";
 import { SearchFilter, SearchRequestV3, SortModel } from "@depict-ai/types/api/SearchRequestV3";
 import { ProductListingResponseV3, SearchFilter as _SearchFilter2 } from "@depict-ai/types/api/ProductListingResponseV3";
 import { SearchSuggestionsRequestV3 } from "@depict-ai/types/api/SearchSuggestionsRequestV3";
@@ -11,7 +11,142 @@ 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.7.33";
+export const version = "4.7.34";
+/**
+ * Provider to wrap every listing (group of products) in
+ * Used for example for deduplicating ResizeObservers for responsive images
+ */
+export function ListingProvider(props: {
+  children: JSX.Element;
+}): JSX.Element;
+/**
+ * Use this to get the context object if your component is within a ListingProvider
+ */
+export function useListing(): Record<symbol, any> | undefined;
+/**
+ * ImageContainer for using the padding hack to set the aspect ratio of an image
+ * Put this around an <img> or <ResponsiveImg> to give it a container that always has the same size as the image. This prevents CLS and enables ResponsiveImg to work (the browser to load the correct image size)
+ * (Not using the CSS aspect-ratio property yet here due to browser support)
+ */
+export function ImageContainer(props: {
+  aspectRatio: number | string;
+  class?: string;
+  children?: JSX.Element;
+}): HTMLDivElement;
+/**
+ * Provider to wrap every product card that gets rendered in (in PLPResults rendering internals), enables using useProductCardIndex anywhere inside the product card to get the index of the product card.
+ */
+export function ProductCardIndexProvider(props: {
+  children: JSX.Element;
+  index_: Accessor<number>;
+}): JSX.Element;
+/**
+ * Use this to get an accessor containing the index of your product card.
+ */
+export function useProductCardIndex(): Accessor<number> | undefined;
+/**
+ * Automatically generate a srcset from the shopify CDN for an image and set the sizes attribute to the provided accessor.
+ * Will also delay loading and decoding of image until the browser is idle (with 5s timeout) to improve filtering/loading more performance.
+ * If ran within Depict product card rendering, within one of the first 8 product cards, those images will be loaded immediately and loading="lazy" will be ignored for them (unless you set it to "force-lazy").
+ * This is used for our responsive images:
+ * 1. The image must have a container with a fixed size (or aspect ratio) that is independent of the image. When aspectRatio is configured on the depict-cards element as data attribute, we will wrap the image in a ImageContainer for this. If it's false, the user has to provide this container themselves.
+ * 2. We set a ResizeObserver on one of the currently visible images (see makeSizeAccessor)
+ * 3. We set the size attribute of all the visible images to the size of the container we're observing. The point of this is that the sizes attribute is used to determine which image to load, and usually it's set by the user and depends on the relationship between image size and viewport size. By using a ResizeObserver, we can make sure the sizes attribute is always set to the correct value without it having to be configured. This will make so the browser always loads the correct image size for a crisp image but still fast load.
+ * You need to use insert(domNode, <ShopifyResponsiveImg size={sizeAccessor} src={src} />) if you want to insert the return value of this component into a DOM element manually, where you `import { insert } from "solid-js/web";` because we first want to insert the image once it has loaded.
+ */
+export function ShopifyResponsiveImg(props: {
+  resolutions?: number[];
+  /**
+   * Width of the container, we'll load an image with that width
+   */
+  size: Accessor<number>;
+  /**
+   * Height of the container, if set we will use this to still load sharp images even when object-fit is set to "cover", and the image is "zoomed" in on the x-axis.
+   */
+  sizeHeight?: Accessor<number>;
+  src: string;
+  loading?: "eager" | "lazy" | "force-lazy";
+  customUrls?: (url: string, width: number) => string;
+  /**
+   * When `true`, data written for ShopifyContainedImage's `autoAdjustAspectRatio` feature will only be allowed to be written the load after the image src has changed. This is to make css transitions on images whose size is animated smoother (since aspect ratio changing minimally as size changes will cause the transition to restart)
+   */
+  keyRatioUpdating?: boolean;
+} & Omit<JSX.ImgHTMLAttributes<HTMLImageElement>, "srcset" | "src" | "sizes" | "loading">): JSX.Element;
+/**
+ * Base placeholder component used by ImagePlaceholder and TextPlaceholder
+ */
+export function BasePlaceholder(props: {
+  style: JSX.CSSProperties;
+  class?: string;
+}): JSX.Element;
+type ImagePlaceholderBaseOptions = {
+  style?: JSX.CSSProperties;
+  class?: string;
+};
+type ImagePlaceholderBlockOptions = {
+  width: string;
+  height: string;
+};
+type ImagePlaceholderImageOptions = {
+  aspectRatio: number | string;
+};
+/**
+ * A placeholder that can be used instead of an image or other block of content while it's loading.
+ * The placeholder has `display:block`, meaning it will create a new "row" in the layout for itself. Can be used either for images with a defined aspect ratio (ContainedImage) or blocks.
+ * @property aspectRatio if aspectRatio is defined the placeholder will be in "image mode" and fill out the available width and then adjust the height according to the aspectRatio
+ * @property width If width and height is set, the defined width and height will be used.
+ * @property height If width and height is set, the defined width and height will be used.
+ * @property class extra classes to add to the placeholder
+ * @property style extra styles to add to the placeholder
+ */
+export function ImagePlaceholder(props: ImagePlaceholderBaseOptions & (ImagePlaceholderBlockOptions | ImagePlaceholderImageOptions)): JSX.Element;
+/**
+ * A Placeholder to use instead of some text, while it's loading. This is the inline version, meant to be embedded into sentences (or exist instead of them), etc.
+ * If you want a block version, use `ImagePlaceholder` with `width`and `height` set instead.
+ * @property height height of the placeholder. Set to `1em` by default.
+ * @property width width of the placeholder. For specific number of characters use `ch`, ex: `width="7ch"`
+ * @property class extra classes to add to the placeholder
+ * @property style extra styles to add to the placeholder
+ */
+export function TextPlaceholder(props: {
+  style?: JSX.CSSProperties;
+  height: string;
+  width: string;
+  class?: string;
+}): JSX.Element;
+export function DefaultInstantCardPlaceholder(): HTMLDivElement;
+/**
+ * Returns two accessors (one width and one height) that will update when the size of the provided element changes, to be used with ResponsiveImg
+ */
+export function makeSizeAccessors(whatToWatch: HTMLElement): [Accessor<number>, Accessor<number>];
+export const shopifyContainedImageContextSymbol: unique symbol;
+/**
+ * Abstraction built on top of ShopifyResponsiveImg. This is your one-stop-shop If you just need a responsive image.
+ * Will return a div of the provided aspect ratio that always has the same size, to avoid content layout shift. Will then put the image inside of the container once it loads.
+ * Also makes a responsive image without you having to do anything: uses shopify's CDN which picks the best image format to resize the image to the size of the first image container in a certain listing.
+ * This works because the listings (recs, search, plp) all are wrapped in `<ListingProvider>`'s. This means all components rendered within can use `useListing` to get an object to write data to that will be the same for all components rendered within that listing. The first instance of this component rendered within a listing puts a ResizeObserver on its div and the other components then just set the sizes attribute of their image to that.
+ * @property src image source
+ * @property aspectRatio aspect ratio of the image
+ * @property class extra class to add to the container
+ * @property alt alt text for the image
+ * @property autoAdjustAspectRatio whether to automatically adjust the aspect ratio of the image to the majority of the aspect ratios of loaded images in the current listing provider. Defaults to false. Can be overriden with css variable --image-aspect-ratio.
+ * @property imgProps props to pass to ShopifyResponsiveImg to add to the <img> element
+ */
+export function ShopifyContainedImage(props: {
+  src: string;
+  aspectRatio: number | string;
+  autoAdjustAspectRatio?: boolean;
+  class?: string;
+  imgProps?: Omit<Parameters<typeof ShopifyResponsiveImg>[0], "size" | "src">;
+}): HTMLDivElement;
+/**
+ * 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;
+/**
+ * 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;
 type DisplayTransformerAlwaysThereData = {
   merchant: string;
   market: string;
@@ -88,34 +223,6 @@ export function SentryErrorBoundary(props: {
   on_error_?: (retry: VoidFunction) => JSX.Element | void;
   class_list_?: string[];
 }): JSX.Element;
-/**
- * Base placeholder component used by ImagePlaceholder and TextPlaceholder
- */
-export function BasePlaceholder(props: {
-  style: JSX.CSSProperties;
-  class?: string;
-}): JSX.Element;
-type ImagePlaceholderBaseOptions = {
-  style?: JSX.CSSProperties;
-  class?: string;
-};
-type ImagePlaceholderBlockOptions = {
-  width: string;
-  height: string;
-};
-type ImagePlaceholderImageOptions = {
-  aspectRatio: number | string;
-};
-/**
- * A placeholder that can be used instead of an image or other block of content while it's loading.
- * The placeholder has `display:block`, meaning it will create a new "row" in the layout for itself. Can be used either for images with a defined aspect ratio (ContainedImage) or blocks.
- * @property aspectRatio if aspectRatio is defined the placeholder will be in "image mode" and fill out the available width and then adjust the height according to the aspectRatio
- * @property width If width and height is set, the defined width and height will be used.
- * @property height If width and height is set, the defined width and height will be used.
- * @property class extra classes to add to the placeholder
- * @property style extra styles to add to the placeholder
- */
-export function ImagePlaceholder(props: ImagePlaceholderBaseOptions & (ImagePlaceholderBlockOptions | ImagePlaceholderImageOptions)): JSX.Element;
 /**
  * The interface for a content block.
  * Please make sure that you don't have content blocks overlap as that will cause undefined behavior.
@@ -222,17 +329,6 @@ type AddActualFieldToArray<T> = T extends Array<infer U> ? (U & {
   actual_field?: string;
 })[] : never;
 type AddActualFieldToFilters<T extends SearchFilter[] | undefined> = T extends undefined ? undefined : AddActualFieldToArray<T>;
-/**
- * Provider to wrap every product card that gets rendered in (in PLPResults rendering internals), enables using useProductCardIndex anywhere inside the product card to get the index of the product card.
- */
-export function ProductCardIndexProvider(props: {
-  children: JSX.Element;
-  index_: Accessor<number>;
-}): JSX.Element;
-/**
- * Use this to get an accessor containing the index of your product card.
- */
-export function useProductCardIndex(): Accessor<number> | undefined;
 /**
  * This is a function that will safely clone an object that may contain promises.
  * It will use structuredClone to clone the object and then re-apply (copy) any promises that were in the original object to the cloned object.
@@ -298,91 +394,6 @@ export function SolidLayout(props: SolidLayoutOptions): JSX.Element;
  * When using insert_after_container, view more and view less buttons are not currently supported.
  */
 export function SolidLayoutWithProvidedElement(props: Omit<SolidLayoutOptions, "children" | "element_attributes">, container_element: HTMLDivElement, insert_after_container?: boolean, container_class?: string): JSX.Element;
-/**
- * Provider to wrap every listing (group of products) in
- * Used for example for deduplicating ResizeObservers for responsive images
- */
-export function ListingProvider(props: {
-  children: JSX.Element;
-}): JSX.Element;
-/**
- * Use this to get the context object if your component is within a ListingProvider
- */
-export function useListing(): Record<symbol, any> | undefined;
-/**
- * A Placeholder to use instead of some text, while it's loading. This is the inline version, meant to be embedded into sentences (or exist instead of them), etc.
- * If you want a block version, use `ImagePlaceholder` with `width`and `height` set instead.
- * @property height height of the placeholder. Set to `1em` by default.
- * @property width width of the placeholder. For specific number of characters use `ch`, ex: `width="7ch"`
- * @property class extra classes to add to the placeholder
- * @property style extra styles to add to the placeholder
- */
-export function TextPlaceholder(props: {
-  style?: JSX.CSSProperties;
-  height: string;
-  width: string;
-  class?: string;
-}): JSX.Element;
-export function DefaultInstantCardPlaceholder(): HTMLDivElement;
-/**
- * ImageContainer for using the padding hack to set the aspect ratio of an image
- * Put this around an <img> or <ResponsiveImg> to give it a container that always has the same size as the image. This prevents CLS and enables ResponsiveImg to work (the browser to load the correct image size)
- * (Not using the CSS aspect-ratio property yet here due to browser support)
- */
-export function ImageContainer(props: {
-  aspectRatio: number | string;
-  class?: string;
-  children?: JSX.Element;
-}): HTMLDivElement;
-/**
- * Returns an accessor that will update when the size of the provided element changes, to be used with ResponsiveImg
- */
-export function makeSizeAccessor(whatToWatch: HTMLElement): Accessor<number>;
-/**
- * Automatically generate a srcset from the shopify CDN for an image and set the sizes attribute to the provided accessor.
- * Will also delay loading and decoding of image until the browser is idle (with 5s timeout) to improve filtering/loading more performance.
- * If ran within Depict product card rendering, within one of the first 8 product cards, those images will be loaded immediately and loading="lazy" will be ignored for them (unless you set it to "force-lazy").
- * This is used for our responsive images:
- * 1. The image must have a container with a fixed size (or aspect ratio) that is independent of the image. When aspectRatio is configured on the depict-cards element as data attribute, we will wrap the image in a ImageContainer for this. If it's false, the user has to provide this container themselves.
- * 2. We set a ResizeObserver on one of the currently visible images (see makeSizeAccessor)
- * 3. We set the size attribute of all the visible images to the size of the container we're observing. The point of this is that the sizes attribute is used to determine which image to load, and usually it's set by the user and depends on the relationship between image size and viewport size. By using a ResizeObserver, we can make sure the sizes attribute is always set to the correct value without it having to be configured. This will make so the browser always loads the correct image size for a crisp image but still fast load.
- * You need to use insert(domNode, <ShopifyResponsiveImg size={sizeAccessor} src={src} />) if you want to insert the return value of this component into a DOM element manually, where you `import { insert } from "solid-js/web";` because we first want to insert the image once it has loaded.
- */
-export function ShopifyResponsiveImg(props: {
-  resolutions?: number[];
-  size: Accessor<number>;
-  src: string;
-  loading?: "eager" | "lazy" | "force-lazy";
-  customUrls?: (url: string, width: number) => string;
-  /**
-   * When `true`, data written for ShopifyContainedImage's `autoAdjustAspectRatio` feature will only be allowed to be written the load after the image src has changed. This is to make css transitions on images whose size is animated smoother (since aspect ratio changing minimally as size changes will cause the transition to restart)
-   */
-  keyRatioUpdating?: boolean;
-} & Omit<JSX.ImgHTMLAttributes<HTMLImageElement>, "srcset" | "src" | "sizes" | "loading">): JSX.Element;
-export const shopifyContainedImageContextSymbol: unique symbol;
-/**
- * Abstraction built on top of ShopifyResponsiveImg. This is your one-stop-shop If you just need a responsive image.
- * Will return a div of the provided aspect ratio that always has the same size, to avoid content layout shift. Will then put the image inside of the container once it loads.
- * Also makes a responsive image without you having to do anything: uses shopify's CDN which picks the best image format to resize the image to the size of the first image container in a certain listing.
- * This works because the listings (recs, search, plp) all are wrapped in `<ListingProvider>`'s. This means all components rendered within can use `useListing` to get an object to write data to that will be the same for all components rendered within that listing. The first instance of this component rendered within a listing puts a ResizeObserver on its div and the other components then just set the sizes attribute of their image to that.
- * @property src image source
- * @property aspectRatio aspect ratio of the image
- * @property class extra class to add to the container
- * @property alt alt text for the image
- * @property autoAdjustAspectRatio whether to automatically adjust the aspect ratio of the image to the majority of the aspect ratios of loaded images in the current listing provider. Defaults to false. Can be overriden with css variable --image-aspect-ratio.
- * @property imgProps props to pass to ShopifyResponsiveImg to add to the <img> element
- */
-export function ShopifyContainedImage(props: {
-  src: string;
-  aspectRatio: number | string;
-  autoAdjustAspectRatio?: boolean;
-  class?: string;
-  imgProps?: Omit<Parameters<typeof ShopifyResponsiveImg>[0], "size" | "src">;
-}): HTMLDivElement;
-/**
- * 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;
 /**
  * PLP internationalisation shared between search and category listing
  */
@@ -1491,7 +1502,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 ModernDisplay>(openModalParams: OpenModalParams<OriginalDisplay, OutputDisplay>) => void;
+export const open_modal_with_alignment: <OriginalDisplay extends Display, OutputDisplay extends unknown>(openModalParams: OpenModalParams<OriginalDisplay, OutputDisplay>) => void;
 export function open_search_with_shift_slash(open_search: VoidFunction): () => void;
 export interface PageReplacer {
   readonly render_: () => Node_Array;
@@ -1570,5 +1581,5 @@ export function CategoryPage<OriginalDisplay extends Display, OutputDisplay exte
   content_blocks_by_row?: ContentBlocksByRow;
   layout?: PossibleLayout;
   filterModalParent_?: HTMLElement | ShadowRoot;
-}): import("@depict-ai/utilishared/latest").Node_Array;
+}): import("@depict-ai/utilishared").Node_Array;
 export type { SearchFilter } from "@depict-ai/types/api/SearchRequestV3";