@depict-ai/ui 1.4.22 → 1.4.23

package/latest/index.d.ts

@@ -1,5 +1,5 @@
-import { Accessor, JSX, Signal, Setter } from "solid-js";
-import { report, Elem, Display, ColsAtSize, ModernDisplay, Node_Array } from "@depict-ai/utilishared/latest";
+import { JSX, Signal, Accessor, Setter } from "solid-js";
+import { Display, report, 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,135 @@ 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 = "1.4.22";
+export const version = "1.4.23";
+export type SDKGridSpacing = string | {
+  horizontal: string;
+  vertical: string;
+};
+export type WithRequired<T, K extends keyof T> = T & { [P in K]-?: T[P] };
+type FilterWithData = WithRequired<SearchFilter, "data">;
+export interface SDKRenderingInfo {
+  set_on_index_change: (fn: (index: number) => void) => void;
+  merchant: string;
+  market: string;
+}
+export type ProductCardTemplate<T extends Display> = (display: T | null, info?: SDKRenderingInfo) => JSX.Element | Promise<JSX.Element>;
+/**
+ * Will be sent to backend to indicate whether the query_id_ is for a collection or category.
+ * Backend defaults to category if not specified.
+ */
+export type ListingType = "collection" | "category";
+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>;
+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;
+  rows: {
+    start_rows?: number;
+    rows_per_click?: number;
+    currently_visible?: Signal<number>;
+    max_rows?: number;
+    button?: JSX.Element;
+    view_less_button?: JSX.Element;
+  } | "all";
+  layout: "slider" | "grid";
+  disable_partial_rows?: boolean;
+  override_vertical_spacing?: string;
+  children: JSX.Element;
+  element_attributes: JSX.HTMLAttributes<HTMLDivElement>;
+};
+/**
+ * SolidLayout: SolidJS adaption of Layout. Calculates CSS for a grid or slider with a certain spacing and certain number of columns at certain screen sizes, including a view more button. All properties are reactive.
+ * @property       rows                  if set to 'all': Just generate grid styling without any viewing/hiding functionality. If an object: start_rows is the number of rows at the beginning. rows_per_click is the amount of rows to view on each view more button click. button is the view more button to display. currently_visible is a signal that you can use to get and set the number of currently viewed rows
+ * @property       cols_at_size          An array with sub arrays looking like this: `[n_cols, min_width_media_query, max_width_media_query, grid_spacing_for_size]`, everything after `[n_cols, min_width]` is optional. falsey value for `min_width = no min_width`
+ * @property       grid_spacing  spacing to use if none is specified for the specific size in `cols_at_size`
+ * @property       disable_partial_rows  If set to `true`, will not let user press "show more" if next row is a partial row. Example of partial row: `cols_at_size` says we should have 4 recs in the next row, but we only have 2 left, so the row just gets 2 instead of 4, meaning it doesn't "fill out".
+ * @property override_vertical_spacing by default, the grid_spacing is used both horizontally and vertically, with this you can specify a separate spacing
+ * @return An accessor containing a CSS string
+ */
+export function SolidLayout(props: SolidLayoutOptions): JSX.Element;
+export type SDKColsAtSize = [number, number?][];
+/**
+ * Transform SDK ColsAtSize into valid Layout ColsAtSize
+ * @param cols_at_size [nbCol, maxWidth]
+ * @returns
+ */
+export const convert_sdk_cols_at_size_to_layout: (cols_at_size: SDKColsAtSize) => ColsAtSize;
+/** @jsxImportSource solid-js */
+export function GenericSliderArrowButton(props?: {
+  width_?: number;
+  height_?: number;
+}): SVGElement;
+type WithoutMerchant<T> = T extends {
+  merchant: string;
+} ? Omit<T, "merchant"> : T;
+type WithoutMarket<T> = T extends {
+  market: string;
+} ? Omit<T, "market"> : T;
+type ModifiedProductCardTemplate<T extends Display> = (display: Parameters<ProductCardTemplate<T>>[0], info?: WithoutMerchant<WithoutMarket<SDKRenderingInfo>>) => ReturnType<ProductCardTemplate<T>>;
+type RecommendationSliderBaseProps<T extends Display> = {
+  grid_spacing: SDKGridSpacing;
+  cols_at_size: SDKColsAtSize;
+  recommendations: Promise<T[]>;
+};
+/**
+ * Render a grid with provided recommendations. displayTransformers will not be applied for this since you yourself provide the displays. Options are reactive.
+ * If no merchant or market is specified, the product cards won't get any merchant and market in their second argument.
+ */
+export function RecommendationSlider<T extends Display>(props: {
+  product_card_template: ProductCardTemplate<T>;
+  merchant: string;
+  market: string;
+} & RecommendationSliderBaseProps<T>): any;
+export function RecommendationSlider<T extends Display>(props: {
+  product_card_template: ModifiedProductCardTemplate<T>;
+  merchant?: never;
+  market?: never;
+} & RecommendationSliderBaseProps<T>): any;
+type _WithoutMerchant1<T> = T extends {
+  merchant: string;
+} ? Omit<T, "merchant"> : T;
+type _WithoutMarket1<T> = T extends {
+  market: string;
+} ? Omit<T, "market"> : T;
+type _ModifiedProductCardTemplate1<T extends Display> = (display: Parameters<ProductCardTemplate<T>>[0], info?: _WithoutMerchant1<_WithoutMarket1<SDKRenderingInfo>>) => ReturnType<ProductCardTemplate<T>>;
+type RecommendationGridBaseProps<T extends Display> = {
+  grid_spacing: SDKGridSpacing;
+  cols_at_size: SDKColsAtSize;
+  recommendations: Promise<T[]>;
+  view_more_button?: {
+    text: string;
+    start_rows?: number;
+    rows_per_click?: number;
+  };
+};
+/**
+ * Render a grid with provided recommendations. displayTransformers will not be applied for this since you yourself provide the displays. Options are reactive.
+ * If no merchant or market is specified, the product cards won't get any merchant and market in their second argument.
+ */
+export function RecommendationGrid<T extends Display>(props: {
+  product_card_template: ProductCardTemplate<T>;
+  merchant: string;
+  market: string;
+} & RecommendationGridBaseProps<T>): any;
+export function RecommendationGrid<T extends Display>(props: {
+  product_card_template: _ModifiedProductCardTemplate1<T>;
+  merchant?: never;
+  market?: never;
+} & RecommendationGridBaseProps<T>): any;
 /**
  * Returns an accessor that will update when the size of the provided element changes, to be used with ResponsiveImg
  */
@@ -39,17 +167,6 @@ export function ShopifyResponsiveImg({
 export function ImageContainer(props: {
   aspectRatio: number;
 }): HTMLDivElement;
-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 function ExpandingDetails(props: {
   details_: HTMLDetailsElement;
   summary_: HTMLElement;
@@ -154,11 +271,6 @@ interface category_i18n extends plp_shared_i18n {
  */
 /** For internal components using i18n that gets wrapped in solid's Accessors */
 type solid_plp_shared_i18n = { [K in keyof plp_shared_i18n]: Accessor<plp_shared_i18n[K]> };
-/** @jsxImportSource solid-js */
-export function GenericSliderArrowButton(props?: {
-  width_?: number;
-  height_?: number;
-}): SVGElement;
 export function show_toast({
   children,
   on_close_,
@@ -171,27 +283,6 @@ export function show_toast({
 } & JSX.HTMLAttributes<HTMLDivElement>): {
   close_toast_: VoidFunction;
 };
-export type SDKGridSpacing = string | {
-  horizontal: string;
-  vertical: string;
-};
-export type WithRequired<T, K extends keyof T> = T & { [P in K]-?: T[P] };
-type FilterWithData = WithRequired<SearchFilter, "data">;
-export interface SDKRenderingInfo {
-  set_on_index_change: (fn: (index: number) => void) => void;
-  merchant: string;
-  market: string;
-}
-export type ProductCardTemplate<T extends Display> = (display: T | null, info?: SDKRenderingInfo) => JSX.Element | Promise<JSX.Element>;
-/**
- * Will be sent to backend to indicate whether the query_id_ is for a collection or category.
- * Backend defaults to category if not specified.
- */
-export type ListingType = "collection" | "category";
-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>;
 export function CrossIcon(props?: JSX.SvgSVGAttributes<SVGSVGElement>): SVGElement;
 export function SelectedFilters({
   number_of_rendered_selected_filters_items_,
@@ -272,33 +363,6 @@ export function create_modified_filters({
   }[]>;
   local_filter_cache_: Signal<_SearchFilter1[]>;
 }): void;
-export type SolidLayoutOptions = {
-  cols_at_size: ColsAtSize;
-  grid_spacing: string;
-  rows: {
-    start_rows?: number;
-    rows_per_click?: number;
-    currently_visible?: Signal<number>;
-    max_rows?: number;
-    button?: JSX.Element;
-    view_less_button?: JSX.Element;
-  } | "all";
-  layout: "slider" | "grid";
-  disable_partial_rows?: boolean;
-  override_vertical_spacing?: string;
-  children: JSX.Element;
-  element_attributes: JSX.HTMLAttributes<HTMLDivElement>;
-};
-/**
- * Grid: Calculates CSS for a grid with a certain spacing and certain number of columns at certain screen sizes, including a view more button. All properties are reactive.
- * @property       rows                  if set to 'all': Just generate grid styling without any viewing/hiding functionality. If an object: start_rows is the number of rows at the beginning. rows_per_click is the amount of rows to view on each view more button click. button is the view more button to display. currently_visible is a signal that you can use to get and set the number of currently viewed rows
- * @property       cols_at_size          An array with sub arrays looking like this: `[n_cols, min_width_media_query, max_width_media_query, grid_spacing_for_size]`, everything after `[n_cols, min_width]` is optional. falsey value for `min_width = no min_width`
- * @property       grid_spacing  spacing to use if none is specified for the specific size in `cols_at_size`
- * @property       disable_partial_rows  If set to `true`, will not let user press "show more" if next row is a partial row. Example of partial row: `cols_at_size` says we should have 4 recs in the next row, but we only have 2 left, so the row just gets 2 instead of 4, meaning it doesn't "fill out".
- * @property override_vertical_spacing by default, the grid_spacing is used both horizontally and vertically, with this you can specify a separate spacing
- * @return An accessor containing a CSS string
- */
-export function SolidLayout(props: SolidLayoutOptions): JSX.Element;
 type DisplayTransformerAlwaysThereData = {
   merchant: string;
   market: string;
@@ -549,13 +613,6 @@ export const embedded_num_products: ({
   middle_elements_: Accessor<JSX.Element>;
   on_filters_constructed_: () => void;
 };
-export type SDKColsAtSize = [number, number?][];
-/**
- * Transform SDK ColsAtSize into valid Layout ColsAtSize
- * @param cols_at_size [nbCol, maxWidth]
- * @returns
- */
-export const convert_sdk_cols_at_size_to_layout: (cols_at_size: SDKColsAtSize) => ColsAtSize;
 type GeneralCategoryListingOptions = {
   market: string;
   merchant: string;