@depict-ai/ui 1.3.6 → 1.3.8

package/dist/index.d.ts

@@ -1,18 +1,209 @@
-import { Signal, JSX, Accessor, Setter } from "solid-js";
-import { ColsAtSize, Display, ModernDisplay, Node_Array, Elem } from "@depict-ai/utilishared";
+import { Accessor, JSX, Signal, Setter } from "solid-js";
+import { Elem, Display, ColsAtSize, ModernDisplay, Node_Array } from "@depict-ai/utilishared";
+import { SearchFilter, SearchRequest } from "@depict-ai/types/api/SearchRequest";
+import { SearchFilter as _SearchFilter1, SearchResponse } from "@depict-ai/types/api/SearchResponse";
 import { BaseCategoryDisplay, ProductListingResponse } from "@depict-ai/types/api/ProductListingResponse";
 import { CategorySuggestion, SearchSuggestionsResponse } from "@depict-ai/types/api/SearchSuggestionsResponse";
-import { SearchResponse } from "@depict-ai/types/api/SearchResponse";
-import { SearchRequest, SearchFilter } from "@depict-ai/types/api/SearchRequest";
 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.3.6";
+export const version = "1.3.8";
+export function accessor_of_object_to_object_with_accessor_values<O extends Record<string | symbol, any>>(obj: Accessor<O>): { [K in keyof O]: Accessor<O[K]>; };
+/**
+ * Like standard_price_format except that the price and the formatting are reactive accessors
+ */
+export function SolidFormatPrice(props: {
+    price_: number;
+    price_formatting_: {
+        pre_: string;
+        post_: string;
+        decimal_places_delimiter_: string;
+        thousands_delimiter_: string;
+        places_after_comma_: number | "auto";
+    };
+}): JSX.Element;
+/**
+ * PLP internationalisation shared between search and category listing
+ */
+type plp_shared_i18n = {
+    scroll_to_top_: string;
+    back_: string;
+    open_sorting_: string;
+    close_sorting_: string;
+    open_filters_: string;
+    close_filters_: string;
+    close_: string;
+    ok_: string;
+    filters_cleared_: string;
+    we_cleared_your_filters_: string;
+    restore_: string;
+    sorting_text_: string;
+    filter_text_: string;
+    selected_filters_title_: string;
+    filters_: string;
+    view_less_: string;
+    view_more_: string;
+    clear_all_from_filter_crumbs_: string;
+    clear_individual_filter_: string;
+    of_: string;
+    clear_all_filters_from_big_button_: string;
+    try_without_filters_: string;
+    range_filter_low_point_aria_label_: string;
+    range_filter_high_point_aria_label_: string;
+    morphing_sign_expanded_aria_label_: string;
+    morphing_sign_collapsed_aria_label_: string;
+    price_formatting_: {
+        pre_: string;
+        post_: string;
+        decimal_places_delimiter_: string;
+        thousands_delimiter_: string;
+        places_after_comma_: number | "auto";
+    };
+};
+/**
+ * Search internationalisation
+ */
+interface search_i18n extends plp_shared_i18n {
+    placeholder_text_: string;
+    show_n_results_: (number_of_results: HTMLElement) => Elem[];
+    no_results_text_: string;
+    search_recs_title_: string;
+    clear_filters_query_sorting_after_submit_: string;
+    modal_view_all_results_: (number_of_results: HTMLElement) => Elem[];
+    modal_discover_more_: string;
+    get_showing_results_for_: (query: HTMLElement, number_of_results: HTMLElement) => Elem[];
+    previous_searches_text_: string;
+    category_: string;
+    suggestions_: string;
+    search_submit_button_aria_label_: string;
+    search_field_field_aria_label_: string;
+    previous_searches_delete_entry_from_history_: string;
+}
+/**
+ * Category internationalisation
+ */
+interface category_i18n extends plp_shared_i18n {
+    show_n_products_: (number_of_results: HTMLElement) => Elem[];
+    no_products_text_: string;
+    product_: string;
+    products_: string;
+    breadcrumbs_aria_label_: string;
+    quicklinks_aria_label_: string;
+    breadcrumbs_separator_: string;
+}
+/**
+ * For anything that is not exposed and only used internally we can use solid signals to get more performant rendering.
+ * For anything that can be used outside of solid, like Product Cards and InstantCards these types should not be used.
+ *
+ * Any solid_ type below should not be exposed outside of this library, as the accessors can be confusing and unnecessary.
+ */
+/** 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_, close_after_, ...more_attributes }: {
+    children?: JSX.Element;
+    close_after_: number;
+    on_close_?: VoidFunction;
+} & 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";
+export function CrossIcon(props?: JSX.SvgSVGAttributes<SVGSVGElement>): SVGElement;
+export function SelectedFilters({ number_of_rendered_selected_filters_items_, i18n_, selected_filters_, local_filter_cache_: [read_local_filter_cache], get_search_filters_open_, get_search_sorting_open_, local_filter_cache_, expanded_hierarchical_filters_, }: {
+    get_search_filters_open_: Accessor<boolean>;
+    get_search_sorting_open_: Accessor<boolean>;
+    expanded_hierarchical_filters_: Signal<{
+        value_: string[];
+        expanded_: boolean;
+    }[]>;
+    number_of_rendered_selected_filters_items_: Signal<number>;
+    i18n_: solid_plp_shared_i18n;
+    selected_filters_: Signal<FilterWithData[]>;
+    local_filter_cache_: Signal<SearchFilter[]>;
+}): HTMLDivElement;
+/**
+ * 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);
 }
+/**
+ * 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.
+ * @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;
+interface FilterBodyProps {
+    available_filters_: Accessor<_SearchFilter1[] | undefined>;
+    expanded_filters_: Signal<{
+        section_: string;
+        expanded_: boolean;
+    }[]>;
+    selected_filters_: Signal<{
+        field: string;
+        op: _SearchFilter1["op"];
+        data: any;
+    }[]>;
+    local_filter_cache_: Signal<_SearchFilter1[]>;
+    i18n_: solid_plp_shared_i18n;
+    expanded_hierarchical_filters_: Signal<{
+        value_: string[];
+        expanded_: boolean;
+    }[]>;
+    are_in_modal_?: boolean;
+}
+export function FilterBody(props: FilterBodyProps): JSX.Element;
+export function create_modified_filters({ available_filters_, local_filter_cache_: [read_local_cache, write_local_cache], selected_filters_: [read_selected_filters], }: {
+    available_filters_: Accessor<_SearchFilter1[] | undefined>;
+    selected_filters_: Signal<{
+        field: string;
+        op: _SearchFilter1["op"];
+        data: any;
+    }[]>;
+    local_filter_cache_: Signal<_SearchFilter1[]>;
+}): void;
 export type SolidLayoutOptions = {
     cols_at_size: ColsAtSize;
     grid_spacing: string;
@@ -95,12 +286,6 @@ export function general_modal_abstraction<StaticOptions extends {
     open_modal_: (extra_options_for_modal?: ExtraOptionsProvidedOnOpen, on_dispose?: VoidFunction) => void;
     close_modal_: () => void;
 }>;
-export function CrossIcon(props?: JSX.SvgSVGAttributes<SVGSVGElement>): SVGElement;
-/** @jsxImportSource solid-js */
-export function GenericSliderArrowButton(props?: {
-    width_?: number;
-    height_?: number;
-}): SVGElement;
 export type OnNavigation = ((options: {
     is_replace: boolean;
     new_url: URL;
@@ -168,88 +353,6 @@ type RecsAPIWrapperOptions = {
  * @return This function is guaranteed to return an array of Displays. If anything fails, you will get an empty array.
  */
 export function fetchDepictRecommendations<T extends Display = Display>({ merchant, market, headers, ...fetch_recs_options }: RecsAPIWrapperOptions): Promise<T[]>;
-/**
- * Like standard_price_format except that the price and the formatting are reactive accessors
- */
-export function SolidFormatPrice(props: {
-    price_: number;
-    price_formatting_: {
-        pre_: string;
-        post_: string;
-        decimal_places_delimiter_: string;
-        thousands_delimiter_: string;
-        places_after_comma_: number | "auto";
-    };
-}): JSX.Element;
-/**
- * PLP internationalisation shared between search and category listing
- */
-type plp_shared_i18n = {
-    scroll_to_top_: string;
-    back_: string;
-    open_sorting_: string;
-    close_sorting_: string;
-    open_filters_: string;
-    close_filters_: string;
-    close_: string;
-    ok_: string;
-    filters_cleared_: string;
-    we_cleared_your_filters_: string;
-    restore_: string;
-    sorting_text_: string;
-    filter_text_: string;
-    selected_filters_title_: string;
-    filters_: string;
-    view_less_: string;
-    view_more_: string;
-    clear_all_from_filter_crumbs_: string;
-    clear_individual_filter_: string;
-    of_: string;
-    clear_all_filters_from_big_button_: string;
-    try_without_filters_: string;
-    range_filter_low_point_aria_label_: string;
-    range_filter_high_point_aria_label_: string;
-    morphing_sign_expanded_aria_label_: string;
-    morphing_sign_collapsed_aria_label_: string;
-    price_formatting_: {
-        pre_: string;
-        post_: string;
-        decimal_places_delimiter_: string;
-        thousands_delimiter_: string;
-        places_after_comma_: number | "auto";
-    };
-};
-/**
- * Search internationalisation
- */
-interface search_i18n extends plp_shared_i18n {
-    placeholder_text_: string;
-    show_n_results_: (number_of_results: HTMLElement) => Elem[];
-    no_results_text_: string;
-    search_recs_title_: string;
-    clear_filters_query_sorting_after_submit_: string;
-    modal_view_all_results_: (number_of_results: HTMLElement) => Elem[];
-    modal_discover_more_: string;
-    get_showing_results_for_: (query: HTMLElement, number_of_results: HTMLElement) => Elem[];
-    previous_searches_text_: string;
-    category_: string;
-    suggestions_: string;
-    search_submit_button_aria_label_: string;
-    search_field_field_aria_label_: string;
-    previous_searches_delete_entry_from_history_: string;
-}
-/**
- * Category internationalisation
- */
-interface category_i18n extends plp_shared_i18n {
-    show_n_products_: (number_of_results: HTMLElement) => Elem[];
-    no_products_text_: string;
-    product_: string;
-    products_: string;
-    breadcrumbs_aria_label_: string;
-    quicklinks_aria_label_: string;
-    breadcrumbs_separator_: string;
-}
 export type InstantCard<T extends Display> = (display: T, context: {
     index: number;
     i18n: search_i18n;
@@ -309,56 +412,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>;
-export type SDKGridSpacing = string | {
-    horizontal: string;
-    vertical: string;
-};
-export type WithRequired<T, K extends keyof T> = T & {
-    [P in K]-?: T[P];
-};
-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";
-export function show_toast({ children, on_close_, close_after_, ...more_attributes }: {
-    children?: JSX.Element;
-    close_after_: number;
-    on_close_?: VoidFunction;
-} & JSX.HTMLAttributes<HTMLDivElement>): {
-    close_toast_: VoidFunction;
-};
-/**
- * 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.
- * @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;
 /**
  * Disables scrolling until the solidjs reactive scoped is disposed (onCleanup)
  * @returns A cleanup function to manually re-enable scrolling.
@@ -400,7 +453,9 @@ type GeneralCategoryListingOptions = {
     market: string;
     merchant: string;
     localization: category_i18n;
+    unique_instance_key_for_state?: string;
     on_navigation?: OnNavigation;
+    query_id_state_key?: string;
 };
 type CategoryConstructorOptionsWithApi<InputDisplay extends Display, OutputDisplay extends ModernDisplay | never> = GeneralCategoryListingOptions & {
     api: DepictAPI<InputDisplay, OutputDisplay>;
@@ -431,7 +486,7 @@ export class DepictCategory<InputDisplay extends Display, OutputDisplay extends
     set listing_type(listing_type: ListingType | undefined);
     get on_navigation(): OnNavigation;
     set on_navigation(new_function: OnNavigation);
-    constructor({ api, on_navigation, page_url_creator, ...props_on_class }: DepictCategoryConstructorOptions<InputDisplay, OutputDisplay>);
+    constructor({ api, on_navigation, page_url_creator, unique_instance_key_for_state, query_id_state_key, ...props_on_class }: DepictCategoryConstructorOptions<InputDisplay, OutputDisplay>);
 }
 export function CategoryPage<OriginalDisplay extends Display, OutputDisplay extends ModernDisplay | never>(props: {
     depict_category: DepictCategory<OriginalDisplay, OutputDisplay>;
@@ -511,6 +566,7 @@ type GeneralConstructorOptions<InputDisplay extends Display, OutputDisplay exten
     on_navigation?: OnNavigation;
     url_transformer?: (url_object: URL) => unknown;
     enable_category_suggestions?: boolean;
+    unique_instance_key_for_state?: string;
     disable_scrolling_during_modal?: boolean;
     bottom_distance_under_modal?: Accessor<number | undefined>;
     render_instant_card?: InstantCard<OutputDisplay extends ModernDisplay ? OutputDisplay : InputDisplay>;
@@ -537,7 +593,7 @@ export type OpenModalArguments = [
 export const get_search_query_updating_blocked_signal: (depict_search: DepictSearch<any>) => Signal<boolean> | undefined;
 export class DepictSearch<InputDisplay extends Display, OutputDisplay extends ModernDisplay | never = InputDisplay extends ModernDisplay ? ModernDisplayWithPageUrl<InputDisplay> : never> {
     #private;
-    constructor({ search_query_url_param_name: search_query_url_param_name_, url_transformer, on_navigation, enable_category_suggestions, page_url_creator, disable_scrolling_during_modal, api, bottom_distance_under_modal, render_instant_card, ...props_on_class }: ConstructorOptions<InputDisplay, OutputDisplay>);
+    constructor({ unique_instance_key_for_state, search_query_url_param_name: search_query_url_param_name_, url_transformer, on_navigation, enable_category_suggestions, page_url_creator, disable_scrolling_during_modal, api, bottom_distance_under_modal, render_instant_card, ...props_on_class }: ConstructorOptions<InputDisplay, OutputDisplay>);
     get on_navigation(): OnNavigation;
     set on_navigation(new_function: OnNavigation);
     get localization(): search_i18n;
@@ -595,6 +651,13 @@ export type BaseProviderConfig<InputDisplay extends Display, PossibleTransformed
      * Custom metadata to be sent with each request to the Depict API. Only necessary if specifically instructed by Depict.
      */
     metaData?: Record<string, string>;
+    /**
+     * You can't have more than one instance of the same provider on the same page, unless you specify a unique instance key for each one.
+     * This is because there's state in the URL and history.state and the state of the different instances would collide.
+     * By setting this property, you can specify a unique key for each instance, so that the state of each instance is kept separate.
+     * We recommend to just use an incrementing number for this, e.g. "1", "2", "3", ...
+     */
+    uniqueInstanceKeyForState?: string;
 } & (InputDisplay extends ModernDisplay ? "page_url" extends keyof InputDisplay["variant_displays"][number] ? {
     pageURLCreator?: PageURLCreator<InputDisplay, PossibleTransformedDisplay>;
 } : {