@depict-ai/ui 2.0.13 → 2.0.15

package/latest/index.d.ts

@@ -1,5 +1,5 @@
-import { JSX, Signal, Accessor, Setter } from "solid-js";
-import { Display, ColsAtSize, report, Elem, ModernDisplay, Node_Array } from "@depict-ai/utilishared/latest";
+import { JSX, Accessor, Signal, Setter } from "solid-js";
+import { Amazing_Slider, Display, ColsAtSize, report, Elem, ModernDisplay, Node_Array } from "@depict-ai/utilishared/latest";
 import { SearchFilter, SearchRequest } from "@depict-ai/types/api/SearchRequest";
 import { SearchFilter as _SearchFilter1, ContentLink, SearchResponse } from "@depict-ai/types/api/SearchResponse";
 import { BaseCategoryDisplay, ProductListingResponse } from "@depict-ai/types/api/ProductListingResponse";
@@ -7,7 +7,77 @@ 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.13";
+export const version = "2.0.15";
+/**
+ * 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;
+/** @jsxImportSource solid-js */
+/**
+ * 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;
+}): 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.
+ * 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.
+ */
+export function ShopifyResponsiveImg(props: {
+  resolutions?: number[];
+  size: Accessor<number>;
+} & Omit<JSX.ImgHTMLAttributes<HTMLImageElement>, "srcset" | "src" | "sizes"> & {
+  src: string;
+}): HTMLImageElement;
+export const shopifyContainedImageContextSymbol: unique symbol;
+/**
+ * Abstraction built on top of ShopifyResponsiveImg
+ * @param src TODO
+ * @param aspectRatio
+ * @constructor
+ */
+export function ShopifyContainedImage(props: {
+  src: string;
+  aspectRatio: number;
+}): HTMLDivElement;
+/** @jsxImportSource solid-js */
+export function GenericSliderArrowButton(props?: {
+  width_?: number;
+  height_?: number;
+}): SVGElement;
+export function SlidableItems({
+  children,
+  slider_ref_,
+  faded_opacity_,
+  mutation_plugins_,
+  disable_fading_,
+  arrow_width_,
+  arrow_height_
+}: {
+  children?: JSX.Element;
+  slider_ref_?: (slider: Amazing_Slider) => any;
+  faded_opacity_?: number;
+  disable_fading_?: boolean;
+  mutation_plugins_?: ((this: Amazing_Slider, mutations: IntersectionObserverEntry[], intersecting_items: Record<number, IntersectionObserverEntry>) => unknown)[];
+  arrow_width_?: number;
+  arrow_height_?: number;
+}): HTMLDivElement;
 /**
  * Returns accessor with the size of the provided element, including padding and border (I think)
  */
@@ -88,11 +158,6 @@ export type SolidLayoutOptions = {
  * @return An accessor containing a CSS string
  */
 export function SolidLayout(props: SolidLayoutOptions): JSX.Element;
-/** @jsxImportSource solid-js */
-export function GenericSliderArrowButton(props?: {
-  width_?: number;
-  height_?: number;
-}): SVGElement;
 type RecommendationSliderBaseProps<T extends Display> = {
   grid_spacing: SDKGridSpacing;
   cols_at_size: SDKColsAtSize;
@@ -137,37 +202,6 @@ export function RecommendationGrid<T extends Display>(props: {
   merchant?: never;
   market?: never;
 } & RecommendationGridBaseProps<T>): 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.
- * 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.
- */
-export function ShopifyResponsiveImg({
-  src: raw_src,
-  size,
-  resolutions,
-  ...otherOptions
-}: {
-  resolutions?: number[];
-  size: Accessor<number>;
-} & Omit<JSX.ImgHTMLAttributes<HTMLImageElement>, "srcset" | "src" | "sizes"> & {
-  src: string;
-}): HTMLImageElement;
-/** @jsxImportSource solid-js */
-/**
- * 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;
-}): HTMLDivElement;
 export function ExpandingDetails(props: {
   details_: HTMLDetailsElement;
   summary_: HTMLElement;