@depict-ai/ui 4.7.29 → 4.7.30

package/latest/index.d.ts

@@ -1,5 +1,5 @@
-import { Accessor, JSX, Setter, Signal } from "solid-js";
-import { Amazing_Slider, Display, useExpandingContainer, ColsAtSize, report, Elem, ModernDisplay, Node_Array } from "@depict-ai/utilishared/latest";
+import { JSX, Accessor, Setter, Signal } from "solid-js";
+import { report, Amazing_Slider, Display, useExpandingContainer, ColsAtSize, Elem, ModernDisplay, Node_Array } from "@depict-ai/utilishared/latest";
 import { SearchFilter, SearchRequestV3, SortModel } from "@depict-ai/types/api/SearchRequestV3";
 import { ContentLink, SearchResponse, SearchFilter as _SearchFilter1 } from "@depict-ai/types/api/SearchResponse";
 import { Ancestors, ListingSuggestion, SearchSuggestionsResponseV3 } from "@depict-ai/types/api/SearchSuggestionsResponseV3";
@@ -11,7 +11,102 @@ 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.29";
+export const version = "4.7.30";
+/**
+ * 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);
+}
+/**
+ * SentryErrorBoundaries within this provider will call getContext_ when an error happens and add that context to sentry
+ */
+export function ExtraSentryContextProvider(props: {
+  children: JSX.Element;
+  getContext_: () => Record<string, any>;
+}): JSX.Element;
+export function SentryErrorBoundary(props: {
+  children: JSX.Element;
+  message_: string;
+  severity_: Parameters<typeof report>[1];
+  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.
+ * 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 (see `ImagePlaceholder`), 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)[];
+/**
+ * Does pure calculations where to put each of the finished wrapped content blocks in the elements in the grid (input is by row). You need to cap span_columns of the blocks to the columns available before passing them to this function.
+ * Also used in the portal in react.
+ * @returns an array where index is index of the blocks in the "displays array" and value is the content block (elements) to show at that index
+ */
+export function remap_blocks_to_index<T = () => JSX.Element | Promise<JSX.Element>>({
+  wrapped_blocks_,
+  n_cols_currently_showing_
+}: {
+  wrapped_blocks_: (undefined | {
+    span_columns: number;
+    span_rows: number;
+    position: "left" | "center" | "right";
+    content: T;
+  })[];
+  n_cols_currently_showing_: number | null;
+}): JSX.Element[];
 /**
  * Returns a set containing the element where every element currently touching the screen started touching it.
  */
@@ -110,24 +205,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);
-}
-/**
- * SentryErrorBoundaries within this provider will call getContext_ when an error happens and add that context to sentry
- */
-export function ExtraSentryContextProvider(props: {
-  children: JSX.Element;
-  getContext_: () => Record<string, any>;
-}): JSX.Element;
-export function SentryErrorBoundary(props: {
-  children: JSX.Element;
-  message_: string;
-  severity_: Parameters<typeof report>[1];
-  on_error_?: (retry: VoidFunction) => JSX.Element | void;
-  class_list_?: string[];
-}): JSX.Element;
 export type SolidLayoutOptions = {
   cols_at_size: ColsAtSize;
   grid_spacing: string;
@@ -171,38 +248,6 @@ export function ListingProvider(props: {
  * Use this to get the context object if your component is within a ListingProvider
  */
 export function useListing(): Record<symbol, any> | undefined;
-/**
- * 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;
-/**
- * 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>;
 /**
  * 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.
@@ -1064,34 +1109,6 @@ type ShopTheLookButtonProps<T extends Display> = ShopTheLookOpenModalOptions<T>
   buttonAttributes?: JSX.ButtonHTMLAttributes<HTMLButtonElement>;
 };
 export function ShopTheLookButton<T extends Display>(props: ShopTheLookButtonProps<T>): 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 (see `ImagePlaceholder`), 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)[];
 /**
  * Render a grid with provided recommendations. displayTransformers will not be applied for this since you yourself provide the displays. Options are reactive.
  */
@@ -1460,7 +1477,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;
@@ -1539,5 +1556,5 @@ export function CategoryPage<OriginalDisplay extends Display, OutputDisplay exte
   content_blocks_by_row?: ContentBlocksByRow;
   layout?: PossibleLayout;
   filterModalParent_?: HTMLElement | ShadowRoot;
-}): import("@depict-ai/utilishared").Node_Array;
+}): import("@depict-ai/utilishared/latest").Node_Array;
 export type { SearchFilter } from "@depict-ai/types/api/SearchRequestV3";