@depict-ai/ui 2.0.26 → 2.1.0

package/latest/index.d.ts

@@ -1,5 +1,5 @@
 import { JSX, Accessor, Signal, Setter } from "solid-js";
-import { Display, Amazing_Slider, ColsAtSize, report, Elem, ModernDisplay, Node_Array } from "@depict-ai/utilishared/latest";
+import { report, Display, Amazing_Slider, ColsAtSize, 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,78 @@ 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.26";
+export const version = "2.1.0";
+/**
+ * Use `javascript_media_query` but return a reactive accessor instead of taking a callback function
+ */
+export function media_query_to_accessor(media_query: string): import("solid-js").Accessor<boolean>;
+declare class SDKError extends Error {}
+export class ProductCardError extends SDKError {
+  constructor(templateError: Error);
+}
+export function SentryErrorBoundary(props: {
+  children: JSX.Element;
+  message_: string;
+  severity_: Parameters<typeof report>[1];
+  on_error_?: (retry: VoidFunction) => 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;
+};
+/**
+ * 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.
+ * The height of the content block will be the height of the tallest item in a row, so if there are no products in a row the content block needs to "bring its own height".
+ * If you need to load any data in the content block, please make sure to return a placeholder while you're doing so, to avoid layout shifts and ensure scroll restoration works correctly.
+ *
+ * - `span_columns`: How many columns the block should span. This will be capped to the number of columns available.
+ * - `span_rows`: How many rows the block should span.
+ * - `position`: Where the block should be positioned. Can be `left`, `center` or `right`.
+ * - `content`: The content to render in the block - please provide a function returning one or multiple HTML elements.
+ */
+export type ContentBlock = {
+  span_columns: number;
+  span_rows: number;
+  position: "left" | "center" | "right";
+  content: () => JSX.Element | Promise<JSX.Element>;
+};
+/**
+ * A sparse array containing content blocks to show (or an empty slot or undefined if there's no block at that index). See ContentBlock for how a content block looks like. The index is the row where the content block should be shown.
+ * For example, to create a block on row 1 and 3 you'd do `[, block1, , block2]`.
+ * Alternatively:
+ * ```
+ * const blocks = [];
+ * blocks[1] = block1;
+ * blocks[3] = block2;
+ * ```
+ */
+export type ContentBlocksByRow = (undefined | ContentBlock)[];
 export type SDKGridSpacing = string | {
   horizontal: string;
   vertical: string;
@@ -138,17 +209,6 @@ export type SDKColsAtSize = [number, number?][];
  * @returns
  */
 export const convert_sdk_cols_at_size_to_layout: (cols_at_size: SDKColsAtSize) => ColsAtSize;
-declare class SDKError extends Error {}
-export class ProductCardError extends SDKError {
-  constructor(templateError: Error);
-}
-export function SentryErrorBoundary(props: {
-  children: JSX.Element;
-  message_: string;
-  severity_: Parameters<typeof report>[1];
-  on_error_?: (retry: VoidFunction) => void;
-  class_list_?: string[];
-}): JSX.Element;
 export type SolidLayoutOptions = {
   cols_at_size: ColsAtSize;
   grid_spacing: string;
@@ -358,13 +418,6 @@ export function SelectedFilters({
   selected_filters_: Signal<FilterWithData[]>;
   local_filter_cache_: Signal<SearchFilter[]>;
 }): HTMLDivElement;
-/**
- * Base placeholder component used by ImagePlaceholder and TextPlaceholder
- */
-export function BasePlaceholder(props: {
-  style: JSX.CSSProperties;
-  class?: string;
-}): 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.
@@ -626,10 +679,6 @@ export class DepictAPI<InputDisplay extends Display, OutputDisplay extends Moder
     failed?: true | undefined;
   }>;
 }
-/**
- * Use `javascript_media_query` but return a reactive accessor instead of taking a callback function
- */
-export function media_query_to_accessor(media_query: string): import("solid-js").Accessor<boolean>;
 /**
  * Disables scrolling until the solidjs reactive scoped is disposed (onCleanup)
  * @returns A cleanup function to manually re-enable scrolling.
@@ -729,6 +778,7 @@ export function CategoryPage<OriginalDisplay extends Display, OutputDisplay exte
   show_breadcrumbs?: boolean;
   category_title: typeof CategoryTitle | typeof embedded_num_products;
   on_query_id_change?: (new_query_id?: string | undefined, old_query_id?: string | undefined) => void;
+  content_blocks_by_row?: ContentBlocksByRow;
 }): import("@depict-ai/utilishared").Node_Array;
 export function BreadCrumbs<T extends Display>({
   depict_category
@@ -747,27 +797,6 @@ export function QuickLinks<T extends Display>({
  * @param type - optional, currently only setting this to "collection" will return collections instead of categories
  */
 export function get_categories(tenant: string, market: string, type?: string): Promise<string[]>;
-type ImagePlaceholderBaseOptions = {
-  style?: JSX.CSSProperties;
-  class?: string;
-};
-type ImagePlaceholderBlockOptions = {
-  width: string;
-  height: string;
-};
-type ImagePlaceholderImageOptions = {
-  aspectRatio: number;
-};
-/**
- * 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;
 export function DefaultInstantCardPlaceholder(): HTMLDivElement;
 /**
  * Useful for aligning the search modal to an element, like an existing input field
@@ -871,6 +900,7 @@ export function SearchPage<OriginalDisplay extends Display, TransformedDisplay e
   grid_spacing: SDKGridSpacing;
   cols_at_size: SDKColsAtSize;
   product_card_template: ProductCardTemplate<[TransformedDisplay] extends [never] ? OriginalDisplay : ModernDisplayWithPageUrl<TransformedDisplay>>;
+  content_blocks_by_row?: ContentBlocksByRow;
   on_query_change?: (new_query?: string | undefined, old_query?: string | undefined) => void;
   extra_depict_options?: {
     recommendations_cols_at_size?: SDKColsAtSize;