@depict-ai/ui 1.4.2 → 1.4.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,5 +1,5 @@
1
1
  import { JSX, Signal, Accessor, Setter } from "solid-js";
2
- import { Elem, Display, ColsAtSize, ModernDisplay, Node_Array } from "@depict-ai/utilishared";
2
+ import { Elem, Display, ColsAtSize, ModernDisplay, Node_Array } from "@depict-ai/utilishared/ES10";
3
3
  import { SearchFilter, SearchRequest } from "@depict-ai/types/api/SearchRequest";
4
4
  import { SearchFilter as _SearchFilter1, SearchResponse } from "@depict-ai/types/api/SearchResponse";
5
5
  import { BaseCategoryDisplay, ProductListingResponse } from "@depict-ai/types/api/ProductListingResponse";
@@ -7,99 +7,99 @@ import { CategorySuggestion, SearchSuggestionsResponse } from "@depict-ai/types/
7
7
  import { BaseSearchRequest } from "@depict-ai/types/api/BaseSearchRequest";
8
8
  import { SearchSuggestionsRequest } from "@depict-ai/types/api/SearchSuggestionsRequest";
9
9
  import { ProductListingRequest } from "@depict-ai/types/api/ProductListingRequest";
10
- export const version = "1.4.2";
10
+ export const version = "1.4.4";
11
11
  export function ExpandingDetails(props: {
12
- details_: HTMLDetailsElement;
13
- summary_: HTMLElement;
14
- children: JSX.Element | (() => JSX.Element);
15
- is_open_: Signal<boolean>;
16
- duration_?: number;
17
- delay_?: number;
18
- dont_animate_if_instant_open_?: boolean;
12
+ details_: HTMLDetailsElement;
13
+ summary_: HTMLElement;
14
+ children: JSX.Element | (() => JSX.Element);
15
+ is_open_: Signal<boolean>;
16
+ duration_?: number;
17
+ delay_?: number;
18
+ dont_animate_if_instant_open_?: boolean;
19
19
  }): HTMLDetailsElement;
20
- 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]>; };
20
+ 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]> };
21
21
  /**
22
22
  * Like standard_price_format except that the price and the formatting are reactive accessors
23
23
  */
24
24
  export function SolidFormatPrice(props: {
25
- price_: number;
26
- price_formatting_: {
27
- pre_: string;
28
- post_: string;
29
- decimal_places_delimiter_: string;
30
- thousands_delimiter_: string;
31
- places_after_comma_: number | "auto";
32
- };
25
+ price_: number;
26
+ price_formatting_: {
27
+ pre_: string;
28
+ post_: string;
29
+ decimal_places_delimiter_: string;
30
+ thousands_delimiter_: string;
31
+ places_after_comma_: number | "auto";
32
+ };
33
33
  }): JSX.Element;
34
34
  /**
35
35
  * PLP internationalisation shared between search and category listing
36
36
  */
37
37
  type plp_shared_i18n = {
38
- scroll_to_top_: string;
39
- back_: string;
40
- open_sorting_: string;
41
- close_sorting_: string;
42
- open_filters_: string;
43
- close_filters_: string;
44
- close_: string;
45
- ok_: string;
46
- filters_cleared_: string;
47
- we_cleared_your_filters_: string;
48
- restore_: string;
49
- sorting_text_: string;
50
- filter_text_: string;
51
- selected_filters_title_: string;
52
- filters_: string;
53
- view_less_: string;
54
- view_more_: string;
55
- clear_all_from_filter_crumbs_: string;
56
- clear_individual_filter_: string;
57
- of_: string;
58
- clear_all_filters_from_big_button_: string;
59
- try_without_filters_: string;
60
- range_filter_low_point_aria_label_: string;
61
- range_filter_high_point_aria_label_: string;
62
- morphing_sign_expanded_aria_label_: string;
63
- morphing_sign_collapsed_aria_label_: string;
64
- price_formatting_: {
65
- pre_: string;
66
- post_: string;
67
- decimal_places_delimiter_: string;
68
- thousands_delimiter_: string;
69
- places_after_comma_: number | "auto";
70
- };
38
+ scroll_to_top_: string;
39
+ back_: string;
40
+ open_sorting_: string;
41
+ close_sorting_: string;
42
+ open_filters_: string;
43
+ close_filters_: string;
44
+ close_: string;
45
+ ok_: string;
46
+ filters_cleared_: string;
47
+ we_cleared_your_filters_: string;
48
+ restore_: string;
49
+ sorting_text_: string;
50
+ filter_text_: string;
51
+ selected_filters_title_: string;
52
+ filters_: string;
53
+ view_less_: string;
54
+ view_more_: string;
55
+ clear_all_from_filter_crumbs_: string;
56
+ clear_individual_filter_: string;
57
+ of_: string;
58
+ clear_all_filters_from_big_button_: string;
59
+ try_without_filters_: string;
60
+ range_filter_low_point_aria_label_: string;
61
+ range_filter_high_point_aria_label_: string;
62
+ morphing_sign_expanded_aria_label_: string;
63
+ morphing_sign_collapsed_aria_label_: string;
64
+ price_formatting_: {
65
+ pre_: string;
66
+ post_: string;
67
+ decimal_places_delimiter_: string;
68
+ thousands_delimiter_: string;
69
+ places_after_comma_: number | "auto";
70
+ };
71
71
  };
72
72
  /**
73
73
  * Search internationalisation
74
74
  */
75
75
  interface search_i18n extends plp_shared_i18n {
76
- placeholder_text_: string;
77
- show_n_results_: (number_of_results: HTMLElement) => Elem[];
78
- no_results_text_: string;
79
- search_recs_title_: string;
80
- clear_filters_query_sorting_after_submit_: string;
81
- modal_view_all_results_: (number_of_results: HTMLElement) => Elem[];
82
- modal_discover_more_: string;
83
- get_showing_results_for_: (query: HTMLElement, number_of_results: HTMLElement) => Elem[];
84
- previous_searches_text_: string;
85
- category_: string;
86
- brand_: string;
87
- suggestions_: string;
88
- search_submit_button_aria_label_: string;
89
- search_field_field_aria_label_: string;
90
- previous_searches_delete_entry_from_history_: string;
76
+ placeholder_text_: string;
77
+ show_n_results_: (number_of_results: HTMLElement) => Elem[];
78
+ no_results_text_: string;
79
+ search_recs_title_: string;
80
+ clear_filters_query_sorting_after_submit_: string;
81
+ modal_view_all_results_: (number_of_results: HTMLElement) => Elem[];
82
+ modal_discover_more_: string;
83
+ get_showing_results_for_: (query: HTMLElement, number_of_results: HTMLElement) => Elem[];
84
+ previous_searches_text_: string;
85
+ category_: string;
86
+ brand_: string;
87
+ suggestions_: string;
88
+ search_submit_button_aria_label_: string;
89
+ search_field_field_aria_label_: string;
90
+ previous_searches_delete_entry_from_history_: string;
91
91
  }
92
92
  /**
93
93
  * Category internationalisation
94
94
  */
95
95
  interface category_i18n extends plp_shared_i18n {
96
- show_n_products_: (number_of_results: HTMLElement) => Elem[];
97
- no_products_text_: string;
98
- product_: string;
99
- products_: string;
100
- breadcrumbs_aria_label_: string;
101
- quicklinks_aria_label_: string;
102
- breadcrumbs_separator_: string;
96
+ show_n_products_: (number_of_results: HTMLElement) => Elem[];
97
+ no_products_text_: string;
98
+ product_: string;
99
+ products_: string;
100
+ breadcrumbs_aria_label_: string;
101
+ quicklinks_aria_label_: string;
102
+ breadcrumbs_separator_: string;
103
103
  }
104
104
  /**
105
105
  * For anything that is not exposed and only used internally we can use solid signals to get more performant rendering.
@@ -108,33 +108,34 @@ interface category_i18n extends plp_shared_i18n {
108
108
  * Any solid_ type below should not be exposed outside of this library, as the accessors can be confusing and unnecessary.
109
109
  */
110
110
  /** For internal components using i18n that gets wrapped in solid's Accessors */
111
- type solid_plp_shared_i18n = {
112
- [K in keyof plp_shared_i18n]: Accessor<plp_shared_i18n[K]>;
113
- };
111
+ type solid_plp_shared_i18n = { [K in keyof plp_shared_i18n]: Accessor<plp_shared_i18n[K]> };
114
112
  /** @jsxImportSource solid-js */
115
113
  export function GenericSliderArrowButton(props?: {
116
- width_?: number;
117
- height_?: number;
114
+ width_?: number;
115
+ height_?: number;
118
116
  }): SVGElement;
119
- export function show_toast({ children, on_close_, close_after_, ...more_attributes }: {
120
- children?: JSX.Element;
121
- close_after_: number;
122
- on_close_?: VoidFunction;
117
+ export function show_toast({
118
+ children,
119
+ on_close_,
120
+ close_after_,
121
+ ...more_attributes
122
+ }: {
123
+ children?: JSX.Element;
124
+ close_after_: number;
125
+ on_close_?: VoidFunction;
123
126
  } & JSX.HTMLAttributes<HTMLDivElement>): {
124
- close_toast_: VoidFunction;
127
+ close_toast_: VoidFunction;
125
128
  };
126
129
  export type SDKGridSpacing = string | {
127
- horizontal: string;
128
- vertical: string;
129
- };
130
- export type WithRequired<T, K extends keyof T> = T & {
131
- [P in K]-?: T[P];
130
+ horizontal: string;
131
+ vertical: string;
132
132
  };
133
+ export type WithRequired<T, K extends keyof T> = T & { [P in K]-?: T[P] };
133
134
  type FilterWithData = WithRequired<SearchFilter, "data">;
134
135
  export interface SDKRenderingInfo {
135
- set_on_index_change: (fn: (index: number) => void) => void;
136
- merchant: string;
137
- market: string;
136
+ set_on_index_change: (fn: (index: number) => void) => void;
137
+ merchant: string;
138
+ market: string;
138
139
  }
139
140
  export type ProductCardTemplate<T extends Display> = (display: T | null, info?: SDKRenderingInfo) => JSX.Element | Promise<JSX.Element>;
140
141
  /**
@@ -142,34 +143,46 @@ export type ProductCardTemplate<T extends Display> = (display: T | null, info?:
142
143
  * Backend defaults to category if not specified.
143
144
  */
144
145
  export type ListingType = "collection" | "category";
146
+ type AddActualFieldToArray<T> = T extends Array<infer U> ? (U & {
147
+ actual_field?: string;
148
+ })[] : never;
149
+ type AddActualFieldToFilters<T extends SearchFilter[] | undefined> = T extends undefined ? undefined : AddActualFieldToArray<T>;
145
150
  export function CrossIcon(props?: JSX.SvgSVGAttributes<SVGSVGElement>): SVGElement;
146
- 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_, }: {
147
- get_search_filters_open_: Accessor<boolean>;
148
- get_search_sorting_open_: Accessor<boolean>;
149
- expanded_hierarchical_filters_: Signal<{
150
- value_: string[];
151
- expanded_: boolean;
152
- }[]>;
153
- number_of_rendered_selected_filters_items_: Signal<number>;
154
- i18n_: solid_plp_shared_i18n;
155
- selected_filters_: Signal<FilterWithData[]>;
156
- local_filter_cache_: Signal<SearchFilter[]>;
151
+ export function SelectedFilters({
152
+ number_of_rendered_selected_filters_items_,
153
+ i18n_,
154
+ selected_filters_,
155
+ local_filter_cache_: [read_local_filter_cache],
156
+ get_search_filters_open_,
157
+ get_search_sorting_open_,
158
+ local_filter_cache_,
159
+ expanded_hierarchical_filters_
160
+ }: {
161
+ get_search_filters_open_: Accessor<boolean>;
162
+ get_search_sorting_open_: Accessor<boolean>;
163
+ expanded_hierarchical_filters_: Signal<{
164
+ value_: string[];
165
+ expanded_: boolean;
166
+ }[]>;
167
+ number_of_rendered_selected_filters_items_: Signal<number>;
168
+ i18n_: solid_plp_shared_i18n;
169
+ selected_filters_: Signal<FilterWithData[]>;
170
+ local_filter_cache_: Signal<SearchFilter[]>;
157
171
  }): HTMLDivElement;
158
172
  /**
159
173
  * Use `javascript_media_query` but return a reactive accessor instead of taking a callback function
160
174
  */
161
175
  export function media_query_to_accessor(media_query: string): import("solid-js").Accessor<boolean>;
162
- declare class SDKError extends Error {
163
- }
176
+ declare class SDKError extends Error {}
164
177
  export class ProductCardError extends SDKError {
165
- constructor(templateError: Error);
178
+ constructor(templateError: Error);
166
179
  }
167
180
  /**
168
181
  * Base placeholder component used by ImagePlaceholder and TextPlaceholder
169
182
  */
170
183
  export function BasePlaceholder(props: {
171
- style: JSX.CSSProperties;
172
- class?: string;
184
+ style: JSX.CSSProperties;
185
+ class?: string;
173
186
  }): JSX.Element;
174
187
  /**
175
188
  * 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.
@@ -180,55 +193,59 @@ export function BasePlaceholder(props: {
180
193
  * @property style extra styles to add to the placeholder
181
194
  */
182
195
  export function TextPlaceholder(props: {
183
- style?: JSX.CSSProperties;
184
- height: string;
185
- width: string;
186
- class?: string;
196
+ style?: JSX.CSSProperties;
197
+ height: string;
198
+ width: string;
199
+ class?: string;
187
200
  }): JSX.Element;
188
201
  interface FilterBodyProps {
189
- available_filters_: Accessor<_SearchFilter1[] | undefined>;
190
- expanded_filters_: Signal<{
191
- section_: string;
192
- expanded_: boolean;
193
- }[]>;
194
- selected_filters_: Signal<{
195
- field: string;
196
- op: _SearchFilter1["op"];
197
- data: any;
198
- }[]>;
199
- local_filter_cache_: Signal<_SearchFilter1[]>;
200
- i18n_: solid_plp_shared_i18n;
201
- expanded_hierarchical_filters_: Signal<{
202
- value_: string[];
203
- expanded_: boolean;
204
- }[]>;
205
- are_in_modal_?: boolean;
202
+ available_filters_: Accessor<_SearchFilter1[] | undefined>;
203
+ expanded_filters_: Signal<{
204
+ section_: string;
205
+ expanded_: boolean;
206
+ }[]>;
207
+ selected_filters_: Signal<{
208
+ field: string;
209
+ op: _SearchFilter1["op"];
210
+ data: any;
211
+ }[]>;
212
+ local_filter_cache_: Signal<_SearchFilter1[]>;
213
+ i18n_: solid_plp_shared_i18n;
214
+ expanded_hierarchical_filters_: Signal<{
215
+ value_: string[];
216
+ expanded_: boolean;
217
+ }[]>;
218
+ are_in_modal_?: boolean;
206
219
  }
207
220
  export function FilterBody(props: FilterBodyProps): JSX.Element;
208
- export function create_modified_filters({ available_filters_, local_filter_cache_: [read_local_cache, write_local_cache], selected_filters_: [read_selected_filters], }: {
209
- available_filters_: Accessor<_SearchFilter1[] | undefined>;
210
- selected_filters_: Signal<{
211
- field: string;
212
- op: _SearchFilter1["op"];
213
- data: any;
214
- }[]>;
215
- local_filter_cache_: Signal<_SearchFilter1[]>;
221
+ export function create_modified_filters({
222
+ available_filters_,
223
+ local_filter_cache_: [read_local_cache, write_local_cache],
224
+ selected_filters_: [read_selected_filters]
225
+ }: {
226
+ available_filters_: Accessor<_SearchFilter1[] | undefined>;
227
+ selected_filters_: Signal<{
228
+ field: string;
229
+ op: _SearchFilter1["op"];
230
+ data: any;
231
+ }[]>;
232
+ local_filter_cache_: Signal<_SearchFilter1[]>;
216
233
  }): void;
217
234
  export type SolidLayoutOptions = {
218
- cols_at_size: ColsAtSize;
219
- grid_spacing: string;
220
- rows: {
221
- start_rows?: number;
222
- rows_per_click?: number;
223
- currently_visible?: Signal<number>;
224
- max_rows?: number;
225
- button?: JSX.Element;
226
- } | "all";
227
- layout: "slider" | "grid";
228
- disable_partial_rows?: boolean;
229
- override_vertical_spacing?: string;
230
- children: JSX.Element;
231
- element_attributes: JSX.HTMLAttributes<HTMLDivElement>;
235
+ cols_at_size: ColsAtSize;
236
+ grid_spacing: string;
237
+ rows: {
238
+ start_rows?: number;
239
+ rows_per_click?: number;
240
+ currently_visible?: Signal<number>;
241
+ max_rows?: number;
242
+ button?: JSX.Element;
243
+ } | "all";
244
+ layout: "slider" | "grid";
245
+ disable_partial_rows?: boolean;
246
+ override_vertical_spacing?: string;
247
+ children: JSX.Element;
248
+ element_attributes: JSX.HTMLAttributes<HTMLDivElement>;
232
249
  };
233
250
  /**
234
251
  * 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.
@@ -241,24 +258,22 @@ export type SolidLayoutOptions = {
241
258
  */
242
259
  export function SolidLayout(props: SolidLayoutOptions): JSX.Element;
243
260
  type PageURLCreatorAlwaysThereData = {
244
- merchant: string;
245
- market: string;
261
+ merchant: string;
262
+ market: string;
246
263
  };
247
264
  type PageURLCreatorCategoryData = {
248
- type: "categories";
249
- data: (BaseCategoryDisplay | CategorySuggestion)[];
265
+ type: "categories";
266
+ data: (BaseCategoryDisplay | CategorySuggestion)[];
250
267
  };
251
268
  type PageURLCreatorProductData<T extends ModernDisplay> = {
252
- displays: T[];
253
- type: "products";
269
+ displays: T[];
270
+ type: "products";
254
271
  };
255
272
  type CanBePromiseWrapped<T> = T | Promise<T>;
256
- export type ModernDisplayWithPageUrl<T extends ModernDisplay> = {
257
- [K in keyof T]: K extends "variant_displays" ? (T[K][number] & {
258
- page_url: string;
259
- })[] : T[K];
260
- };
261
- type PageURLCreatorOptions<InputDisplay extends ModernDisplay> = (PageURLCreatorAlwaysThereData & (PageURLCreatorCategoryData | PageURLCreatorProductData<InputDisplay>));
273
+ export type ModernDisplayWithPageUrl<T extends ModernDisplay> = { [K in keyof T]: K extends "variant_displays" ? (T[K][number] & {
274
+ page_url: string;
275
+ })[] : T[K] };
276
+ type PageURLCreatorOptions<InputDisplay extends ModernDisplay> = PageURLCreatorAlwaysThereData & (PageURLCreatorCategoryData | PageURLCreatorProductData<InputDisplay>);
262
277
  /**
263
278
  * PageUrlCreator is, in its most basic form, a function that takes in a list of categories or products and returns a list of page_urls for the provided categories or products.
264
279
  * It's main use case is to allow for the creation of links to the product or category pages on the merchant's site.
@@ -266,16 +281,16 @@ type PageURLCreatorOptions<InputDisplay extends ModernDisplay> = (PageURLCreator
266
281
  * Also, it can be used to enrich the data for each product card in a batched way, which is why it can be an async function and return a whole display in the case of products.
267
282
  */
268
283
  export type PageURLCreator<InputDisplay extends ModernDisplay, OutputDisplay extends ModernDisplay | never> = (options: PageURLCreatorOptions<InputDisplay>) => (typeof options)["type"] extends "categories" ? CanBePromiseWrapped<{
269
- page_url: string;
284
+ page_url: string;
270
285
  }[]> : CanBePromiseWrapped<{
271
- page_url: string;
286
+ page_url: string;
272
287
  }[]> | CanBePromiseWrapped<OutputDisplay extends ModernDisplay ? ModernDisplayWithPageUrl<OutputDisplay>[] : never>;
273
288
  export type SomethingTakingAPageURLCreator<InputDisplay extends Display, OutputDisplay extends ModernDisplay | never> = InputDisplay extends ModernDisplay ? "page_url" extends keyof InputDisplay["variant_displays"][number] ? {
274
- page_url_creator?: PageURLCreator<InputDisplay, OutputDisplay>;
289
+ page_url_creator?: PageURLCreator<InputDisplay, OutputDisplay>;
275
290
  } : {
276
- page_url_creator: PageURLCreator<InputDisplay, OutputDisplay>;
291
+ page_url_creator: PageURLCreator<InputDisplay, OutputDisplay>;
277
292
  } : {
278
- page_url_creator?: never;
293
+ page_url_creator?: never;
279
294
  };
280
295
  /**
281
296
  * Basically allows you to use SearchModal
@@ -285,46 +300,46 @@ export type SomethingTakingAPageURLCreator<InputDisplay extends Display, OutputD
285
300
  @returns a function to open and close the modal. When calling the open_modal_ function additional parameters can be passed to the modal
286
301
  */
287
302
  export function general_modal_abstraction<StaticOptions extends {
288
- [key: string]: any;
303
+ [key: string]: any;
289
304
  }, ExtraOptionsProvidedOnOpen extends {
290
- [key: string]: any;
305
+ [key: string]: any;
291
306
  }>(search_modal: (options: StaticOptions & ExtraOptionsProvidedOnOpen & {
292
- close_modal_: VoidFunction;
293
- open_modal_: (extra_options_for_modal?: ExtraOptionsProvidedOnOpen, on_dispose?: VoidFunction) => void;
294
- register_closing_animation_: (animation: () => Promise<any>) => void;
307
+ close_modal_: VoidFunction;
308
+ open_modal_: (extra_options_for_modal?: ExtraOptionsProvidedOnOpen, on_dispose?: VoidFunction) => void;
309
+ register_closing_animation_: (animation: () => Promise<any>) => void;
295
310
  }) => Node_Array, modal_fn_opts: StaticOptions): Promise<{
296
- open_modal_: (extra_options_for_modal?: ExtraOptionsProvidedOnOpen, on_dispose?: VoidFunction) => void;
297
- close_modal_: () => void;
311
+ open_modal_: (extra_options_for_modal?: ExtraOptionsProvidedOnOpen, on_dispose?: VoidFunction) => void;
312
+ close_modal_: () => void;
298
313
  }>;
299
314
  export type OnNavigation = ((options: {
300
- is_replace: boolean;
301
- new_url: URL;
302
- scroll: boolean;
315
+ is_replace: boolean;
316
+ new_url: URL;
317
+ scroll: boolean;
303
318
  }) => void) | "hard_navigation";
304
319
  export type ExclusiveId = {
305
- categoryId: string;
306
- productId?: undefined;
307
- productIds?: undefined;
320
+ categoryId: string;
321
+ productId?: undefined;
322
+ productIds?: undefined;
308
323
  } | {
309
- categoryId?: undefined;
310
- productId: string;
311
- productIds?: undefined;
324
+ categoryId?: undefined;
325
+ productId: string;
326
+ productIds?: undefined;
312
327
  } | {
313
- categoryId?: undefined;
314
- productId?: undefined;
315
- productIds: string[];
328
+ categoryId?: undefined;
329
+ productId?: undefined;
330
+ productIds: string[];
316
331
  } | {
317
- categoryId?: undefined;
318
- productId?: undefined;
319
- productIds?: undefined;
332
+ categoryId?: undefined;
333
+ productId?: undefined;
334
+ productIds?: undefined;
320
335
  };
321
336
  type RecsAPIWrapperOptions = {
322
- type: string;
323
- merchant: string;
324
- market: string;
325
- userId?: string;
326
- sessionId?: string;
327
- headers?: HeadersInit;
337
+ type: string;
338
+ merchant: string;
339
+ market: string;
340
+ userId?: string;
341
+ sessionId?: string;
342
+ headers?: HeadersInit;
328
343
  } & ExclusiveId;
329
344
  /**
330
345
  * Fetches recommendations from Depict's API.
@@ -362,95 +377,103 @@ type RecsAPIWrapperOptions = {
362
377
  * ```
363
378
  * @return This function is guaranteed to return an array of Displays. If anything fails, you will get an empty array.
364
379
  */
365
- export function fetchDepictRecommendations<T extends Display = Display>({ merchant, market, headers, ...fetch_recs_options }: RecsAPIWrapperOptions): Promise<T[]>;
380
+ export function fetchDepictRecommendations<T extends Display = Display>({
381
+ merchant,
382
+ market,
383
+ headers,
384
+ ...fetch_recs_options
385
+ }: RecsAPIWrapperOptions): Promise<T[]>;
366
386
  export type InstantCard<T extends Display> = (display: T, context: {
367
- index: number;
368
- i18n: search_i18n;
369
- merchant: string;
370
- market: string;
387
+ index: number;
388
+ i18n: search_i18n;
389
+ merchant: string;
390
+ market: string;
371
391
  }) => JSX.Element;
372
392
  type CategorySuggestionAfterURLCreator = CategorySuggestion & {
373
- page_url: string;
393
+ page_url: string;
374
394
  };
375
395
  type ReplaceCategorySuggestion<T> = T extends CategorySuggestion ? CategorySuggestionAfterURLCreator : T extends CategorySuggestion[] ? CategorySuggestionAfterURLCreator[] : T;
376
- type SearchSuggestionsResponseAfterURLCreator = {
377
- [K in keyof SearchSuggestionsResponse]: ReplaceCategorySuggestion<SearchSuggestionsResponse[K]>;
378
- };
396
+ type SearchSuggestionsResponseAfterURLCreator = { [K in keyof SearchSuggestionsResponse]: ReplaceCategorySuggestion<SearchSuggestionsResponse[K]> };
379
397
  type AddPageUrlToDisplay<T extends any[]> = (T[number] & {
380
- page_url: string;
398
+ page_url: string;
381
399
  })[];
382
- type SearchResponseAfterURLCreator = {
383
- [K in keyof SearchResponse]: K extends "displays" ? AddPageUrlToDisplay<SearchResponse[K]> : SearchResponse[K];
384
- };
400
+ type SearchResponseAfterURLCreator = { [K in keyof SearchResponse]: K extends "displays" ? AddPageUrlToDisplay<SearchResponse[K]> : K extends "filters" ? AddActualFieldToFilters<SearchResponse[K]> : SearchResponse[K] };
385
401
  type BaseCategoryDisplayAfterURLCreator = BaseCategoryDisplay & {
386
- page_url: string;
402
+ page_url: string;
387
403
  };
388
404
  type ReplaceBaseCategoryDisplay<T> = T extends BaseCategoryDisplay ? BaseCategoryDisplayAfterURLCreator : T extends BaseCategoryDisplay[] ? BaseCategoryDisplayAfterURLCreator[] : T;
389
405
  type _AddPageUrlToDisplay1<T extends any[]> = (T[number] & {
390
- page_url: string;
406
+ page_url: string;
391
407
  })[];
392
- type ProductListingResponseAfterURLCreator = {
393
- [K in keyof ProductListingResponse]: K extends "displays" ? _AddPageUrlToDisplay1<ProductListingResponse[K]> : K extends "breadcrumb" | "quick_links" ? ReplaceBaseCategoryDisplay<ProductListingResponse[K]> : ProductListingResponse[K];
394
- };
408
+ type ProductListingResponseAfterURLCreator = { [K in keyof ProductListingResponse]: K extends "displays" ? _AddPageUrlToDisplay1<ProductListingResponse[K]> : K extends "breadcrumb" | "quick_links" ? ReplaceBaseCategoryDisplay<ProductListingResponse[K]> : K extends "filters" ? AddActualFieldToFilters<ProductListingResponse[K]> : ProductListingResponse[K] };
395
409
  type DepictAPIConstructorOptions<InputDisplay extends Display, OutputDisplay extends ModernDisplay | never> = {
396
- get_metadata?: () => Promise<{
397
- [k: string]: string;
398
- } | undefined>;
399
- get_user_id?: () => string | undefined;
400
- get_session_id?: () => string | undefined;
410
+ get_metadata?: () => Promise<{
411
+ [k: string]: string;
412
+ } | undefined>;
413
+ get_user_id?: () => string | undefined;
414
+ get_session_id?: () => string | undefined;
401
415
  } & SomethingTakingAPageURLCreator<InputDisplay, OutputDisplay>;
402
416
  /**
403
417
  * Class that handles all communication done in PLP code with the Depict API. (Notably not for recommendations currently).
404
418
  * It handles caching, retries and errors and is the only place that should be making requests to the Depict API.
405
419
  */
406
420
  export class DepictAPI<InputDisplay extends Display, OutputDisplay extends ModernDisplay | never = InputDisplay extends ModernDisplay ? ModernDisplayWithPageUrl<InputDisplay> : never> {
407
- #private;
408
- page_url_creator: PageURLCreator<ModernDisplay, OutputDisplay> | undefined;
409
- constructor(options: DepictAPIConstructorOptions<InputDisplay, OutputDisplay>);
410
- suggest(input_req: SearchSuggestionsRequest): Promise<SearchSuggestionsResponseAfterURLCreator & {
411
- failed?: true;
412
- }>;
413
- query(input_req: SearchRequest): Promise<SearchResponseAfterURLCreator & {
414
- failed?: true;
415
- }>;
416
- list(input_req: ProductListingRequest): Promise<ProductListingResponseAfterURLCreator & {
417
- failed?: true;
418
- }>;
419
- get_recommended<T extends Display>(input_req: BaseSearchRequest): Promise<{
420
- displays: T[];
421
- } & {
422
- failed?: true | undefined;
423
- }>;
421
+ #private;
422
+ page_url_creator: PageURLCreator<ModernDisplay, OutputDisplay> | undefined;
423
+ constructor(options: DepictAPIConstructorOptions<InputDisplay, OutputDisplay>);
424
+ suggest(input_req: SearchSuggestionsRequest): Promise<SearchSuggestionsResponseAfterURLCreator & {
425
+ failed?: true;
426
+ }>;
427
+ query(input_req: SearchRequest): Promise<SearchResponseAfterURLCreator & {
428
+ failed?: true;
429
+ }>;
430
+ list(input_req: ProductListingRequest): Promise<ProductListingResponseAfterURLCreator & {
431
+ failed?: true;
432
+ }>;
433
+ get_recommended<T extends Display>(input_req: BaseSearchRequest): Promise<{
434
+ displays: T[];
435
+ } & {
436
+ failed?: true | undefined;
437
+ }>;
424
438
  }
425
439
  /**
426
440
  * Disables scrolling until the solidjs reactive scoped is disposed (onCleanup)
427
441
  * @returns A cleanup function to manually re-enable scrolling.
428
442
  */
429
443
  export function disable_scrolling(): () => void;
430
- export const CategoryTitle: ({ category_title_, product_count_, }: {
431
- category_title_: Accessor<string | undefined>;
432
- product_count_: JSX.Element;
444
+ export const CategoryTitle: ({
445
+ category_title_,
446
+ product_count_
447
+ }: {
448
+ category_title_: Accessor<string | undefined>;
449
+ product_count_: JSX.Element;
433
450
  }) => JSX.Element;
434
451
  /**
435
452
  * Embeds number of products between sort and filter buttons on mobile if possible, only supported for category pages right now. Pass it as category_title_ to Category.
436
453
  * Note: this will add an invisible element as first element in depict-search-page which will confuse the flex-gap SCSS mixin a bit so you'll get some extra spacing at the beginning of the search page
437
454
  * If you see “ResizeObserver loop limit exceeded”, this is probably doing it. More context here: https://depictaiworkspace.slack.com/archives/C02KVDZ8YHZ/p1667315647758829
438
455
  */
439
- export const embedded_num_products: ({ make_product_count_, set_observed_results_filters_elements_, is_slim_, sort_and_filter_element_, extra_sort_and_filter_args_, }: {
440
- make_product_count_: () => JSX.Element;
441
- set_observed_results_filters_elements_: Setter<JSX.Element>;
442
- sort_and_filter_element_: Accessor<HTMLDivElement | undefined>;
443
- is_slim_: Accessor<boolean>;
444
- extra_sort_and_filter_args_: {
445
- get_extra_sorting_button_?: ((extra_button: JSX.Element) => unknown) | undefined;
446
- get_extra_filters_button_?: ((extra_button: JSX.Element) => unknown) | undefined;
447
- sort_button_width_?: Accessor<number | undefined> | undefined;
448
- filter_button_width_?: Accessor<number | undefined> | undefined;
449
- };
456
+ export const embedded_num_products: ({
457
+ make_product_count_,
458
+ set_observed_results_filters_elements_,
459
+ is_slim_,
460
+ sort_and_filter_element_,
461
+ extra_sort_and_filter_args_
462
+ }: {
463
+ make_product_count_: () => JSX.Element;
464
+ set_observed_results_filters_elements_: Setter<JSX.Element>;
465
+ sort_and_filter_element_: Accessor<HTMLDivElement | undefined>;
466
+ is_slim_: Accessor<boolean>;
467
+ extra_sort_and_filter_args_: {
468
+ get_extra_sorting_button_?: ((extra_button: JSX.Element) => unknown) | undefined;
469
+ get_extra_filters_button_?: ((extra_button: JSX.Element) => unknown) | undefined;
470
+ sort_button_width_?: Accessor<number | undefined> | undefined;
471
+ filter_button_width_?: Accessor<number | undefined> | undefined;
472
+ };
450
473
  }) => {
451
- only_show_filters_opener_: Accessor<boolean>;
452
- middle_elements_: Accessor<JSX.Element>;
453
- on_filters_constructed_: () => void;
474
+ only_show_filters_opener_: Accessor<boolean>;
475
+ middle_elements_: Accessor<JSX.Element>;
476
+ on_filters_constructed_: () => void;
454
477
  };
455
478
  export type SDKColsAtSize = [number, number?][];
456
479
  /**
@@ -460,60 +483,69 @@ export type SDKColsAtSize = [number, number?][];
460
483
  */
461
484
  export const convert_sdk_cols_at_size_to_layout: (cols_at_size: SDKColsAtSize) => ColsAtSize;
462
485
  type GeneralCategoryListingOptions = {
463
- market: string;
464
- merchant: string;
465
- localization: category_i18n;
466
- unique_instance_key_for_state?: string;
467
- on_navigation?: OnNavigation;
468
- query_id_state_key?: string;
486
+ market: string;
487
+ merchant: string;
488
+ localization: category_i18n;
489
+ unique_instance_key_for_state?: string;
490
+ on_navigation?: OnNavigation;
491
+ query_id_state_key?: string;
469
492
  };
470
493
  type CategoryConstructorOptionsWithApi<InputDisplay extends Display, OutputDisplay extends ModernDisplay | never> = GeneralCategoryListingOptions & {
471
- api: DepictAPI<InputDisplay, OutputDisplay>;
494
+ api: DepictAPI<InputDisplay, OutputDisplay>;
472
495
  } & {
473
- page_url_creator?: never;
496
+ page_url_creator?: never;
474
497
  };
475
498
  type CategoryConstructorOptionsWithoutApi<InputDisplay extends Display, OutputDisplay extends ModernDisplay | never> = GeneralCategoryListingOptions & {
476
- api?: never;
499
+ api?: never;
477
500
  } & (InputDisplay extends ModernDisplay ? "page_url" extends keyof InputDisplay["variant_displays"][number] ? {
478
- page_url_creator?: PageURLCreator<InputDisplay, OutputDisplay>;
501
+ page_url_creator?: PageURLCreator<InputDisplay, OutputDisplay>;
479
502
  } : {
480
- page_url_creator: PageURLCreator<InputDisplay, OutputDisplay>;
503
+ page_url_creator: PageURLCreator<InputDisplay, OutputDisplay>;
481
504
  } : {
482
- page_url_creator?: never;
505
+ page_url_creator?: never;
483
506
  });
484
507
  type DepictCategoryConstructorOptions<InputDisplay extends Display, OutputDisplay extends ModernDisplay> = CategoryConstructorOptionsWithApi<InputDisplay, OutputDisplay> | CategoryConstructorOptionsWithoutApi<InputDisplay, OutputDisplay>;
485
508
  export class DepictCategory<InputDisplay extends Display, OutputDisplay extends ModernDisplay | never = InputDisplay extends ModernDisplay ? ModernDisplayWithPageUrl<InputDisplay> : never> {
486
- #private;
487
- get localization(): category_i18n;
488
- set localization(locale_obj: category_i18n);
489
- get category_id(): string;
490
- set category_id(id: string);
491
- get merchant(): string;
492
- set merchant(merchant: string);
493
- get market(): string;
494
- set market(market: string);
495
- get listing_type(): ListingType | undefined;
496
- set listing_type(listing_type: ListingType | undefined);
497
- get on_navigation(): OnNavigation;
498
- set on_navigation(new_function: OnNavigation);
499
- constructor({ api, on_navigation, page_url_creator, unique_instance_key_for_state, query_id_state_key, ...props_on_class }: DepictCategoryConstructorOptions<InputDisplay, OutputDisplay>);
509
+ #private;
510
+ get localization(): category_i18n;
511
+ set localization(locale_obj: category_i18n);
512
+ get category_id(): string;
513
+ set category_id(id: string);
514
+ get merchant(): string;
515
+ set merchant(merchant: string);
516
+ get market(): string;
517
+ set market(market: string);
518
+ get listing_type(): ListingType | undefined;
519
+ set listing_type(listing_type: ListingType | undefined);
520
+ get on_navigation(): OnNavigation;
521
+ set on_navigation(new_function: OnNavigation);
522
+ constructor({
523
+ api,
524
+ on_navigation,
525
+ page_url_creator,
526
+ unique_instance_key_for_state,
527
+ query_id_state_key,
528
+ ...props_on_class
529
+ }: DepictCategoryConstructorOptions<InputDisplay, OutputDisplay>);
500
530
  }
501
531
  export function CategoryPage<OriginalDisplay extends Display, OutputDisplay extends ModernDisplay | never>(props: {
502
- depict_category: DepictCategory<OriginalDisplay, OutputDisplay>;
503
- grid_spacing: SDKGridSpacing;
504
- cols_at_size: SDKColsAtSize;
505
- product_card_template: ProductCardTemplate<[
506
- OutputDisplay
507
- ] extends [never] ? OriginalDisplay : ModernDisplayWithPageUrl<OutputDisplay>>;
508
- show_quicklinks?: boolean;
509
- show_breadcrumbs?: boolean;
510
- category_title: typeof CategoryTitle | typeof embedded_num_products;
532
+ depict_category: DepictCategory<OriginalDisplay, OutputDisplay>;
533
+ grid_spacing: SDKGridSpacing;
534
+ cols_at_size: SDKColsAtSize;
535
+ product_card_template: ProductCardTemplate<[OutputDisplay] extends [never] ? OriginalDisplay : ModernDisplayWithPageUrl<OutputDisplay>>;
536
+ show_quicklinks?: boolean;
537
+ show_breadcrumbs?: boolean;
538
+ category_title: typeof CategoryTitle | typeof embedded_num_products;
511
539
  }): import("@depict-ai/utilishared").Node_Array;
512
- export function BreadCrumbs<T extends Display>({ depict_category }: {
513
- depict_category: DepictCategory<T>;
540
+ export function BreadCrumbs<T extends Display>({
541
+ depict_category
542
+ }: {
543
+ depict_category: DepictCategory<T>;
514
544
  }): HTMLElement;
515
- export function QuickLinks<T extends Display>({ depict_category }: {
516
- depict_category: DepictCategory<T>;
545
+ export function QuickLinks<T extends Display>({
546
+ depict_category
547
+ }: {
548
+ depict_category: DepictCategory<T>;
517
549
  }): HTMLElement;
518
550
  /**
519
551
  * Gets available categories/collections (query_ids for the product-listing endpoint) for a merchant
@@ -523,15 +555,15 @@ export function QuickLinks<T extends Display>({ depict_category }: {
523
555
  */
524
556
  export function get_categories(tenant: string, market: string, type?: string): Promise<string[]>;
525
557
  type ImagePlaceholderBaseOptions = {
526
- style?: JSX.CSSProperties;
527
- class?: string;
558
+ style?: JSX.CSSProperties;
559
+ class?: string;
528
560
  };
529
561
  type ImagePlaceholderBlockOptions = {
530
- width: string;
531
- height: string;
562
+ width: string;
563
+ height: string;
532
564
  };
533
565
  type ImagePlaceholderImageOptions = {
534
- aspectRatio: number;
566
+ aspectRatio: number;
535
567
  };
536
568
  /**
537
569
  * A placeholder that can be used instead of an image or other block of content while it's loading.
@@ -555,7 +587,7 @@ export function DefaultInstantCardPlaceholder(): HTMLDivElement;
555
587
  */
556
588
  export function align_field(modal_body_style: Signal<JSX.CSSProperties>, input_field: HTMLElement, width_transformer?: (arg0: number) => number, includeScroll?: boolean, one_axies_only?: "top" | "left"): () => void;
557
589
  interface Styles {
558
- [selector: string]: JSX.CSSProperties;
590
+ [selector: string]: JSX.CSSProperties;
559
591
  }
560
592
  export const styles_to_valid_css_string: (styles: Styles) => string;
561
593
  /** A function that renders category suggestion cards. Set to false to disable category suggestions. */
@@ -566,187 +598,194 @@ export type RenderCategorySuggestion = (category_suggestion: Accessor<CategorySu
566
598
  * @returns
567
599
  */
568
600
  export function connect_search_field_height_to_aligner_height(aligner: HTMLElement): {
569
- cleanup: () => void;
601
+ cleanup: () => void;
570
602
  };
571
603
  type GeneralConstructorOptions<InputDisplay extends Display, OutputDisplay extends ModernDisplay | never> = {
572
- search_query_url_param_name?: string;
573
- market: string;
574
- merchant: string;
575
- localization: search_i18n;
576
- on_navigation?: OnNavigation;
577
- url_transformer?: (url_object: URL) => unknown;
578
- enable_category_suggestions?: boolean;
579
- unique_instance_key_for_state?: string;
580
- disable_scrolling_during_modal?: boolean;
581
- bottom_distance_under_modal?: Accessor<number | undefined>;
582
- render_instant_card?: InstantCard<OutputDisplay extends ModernDisplay ? OutputDisplay : InputDisplay>;
604
+ search_query_url_param_name?: string;
605
+ market: string;
606
+ merchant: string;
607
+ localization: search_i18n;
608
+ on_navigation?: OnNavigation;
609
+ url_transformer?: (url_object: URL) => unknown;
610
+ enable_category_suggestions?: boolean;
611
+ unique_instance_key_for_state?: string;
612
+ disable_scrolling_during_modal?: boolean;
613
+ bottom_distance_under_modal?: Accessor<number | undefined>;
614
+ render_instant_card?: InstantCard<OutputDisplay extends ModernDisplay ? OutputDisplay : InputDisplay>;
583
615
  };
584
616
  type ConstructorOptionsWithApi<InputDisplay extends Display, OutputDisplay extends ModernDisplay | never> = GeneralConstructorOptions<InputDisplay, OutputDisplay> & {
585
- api: DepictAPI<InputDisplay, OutputDisplay>;
617
+ api: DepictAPI<InputDisplay, OutputDisplay>;
586
618
  } & {
587
- page_url_creator?: never;
619
+ page_url_creator?: never;
588
620
  };
589
621
  type ConstructorOptionsWithoutAPI<InputDisplay extends Display, OutputDisplay extends ModernDisplay | never> = GeneralConstructorOptions<InputDisplay, OutputDisplay> & {
590
- api?: never;
622
+ api?: never;
591
623
  } & SomethingTakingAPageURLCreator<InputDisplay, OutputDisplay>;
592
624
  type ConstructorOptions<InputDisplay extends Display, OutputDisplay extends ModernDisplay> = ConstructorOptionsWithApi<InputDisplay, OutputDisplay> | ConstructorOptionsWithoutAPI<InputDisplay, OutputDisplay>;
593
- export type OpenModalArguments = [
594
- options_for_modal?: {
595
- style_props_?: Signal<JSX.CSSProperties>;
596
- closing_animation_?: () => Promise<any>;
597
- class_list_?: Accessor<Record<string, boolean>>;
598
- selected_text_range_?: readonly [number | null, number | null] | [number | null, number | null];
599
- dont_sync_search_field_value_except_on_submit_?: boolean;
600
- },
601
- on_dispose?: VoidFunction
602
- ];
625
+ export type OpenModalArguments = [options_for_modal?: {
626
+ style_props_?: Signal<JSX.CSSProperties>;
627
+ closing_animation_?: () => Promise<any>;
628
+ class_list_?: Accessor<Record<string, boolean>>;
629
+ selected_text_range_?: readonly [number | null, number | null] | [number | null, number | null];
630
+ dont_sync_search_field_value_except_on_submit_?: boolean;
631
+ }, on_dispose?: VoidFunction];
603
632
  export const get_search_query_updating_blocked_signal: (depict_search: DepictSearch<any>) => Signal<boolean> | undefined;
604
633
  export class DepictSearch<InputDisplay extends Display, OutputDisplay extends ModernDisplay | never = InputDisplay extends ModernDisplay ? ModernDisplayWithPageUrl<InputDisplay> : never> {
605
- #private;
606
- 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>);
607
- get on_navigation(): OnNavigation;
608
- set on_navigation(new_function: OnNavigation);
609
- get localization(): search_i18n;
610
- set localization(locale_obj: search_i18n);
611
- get modal_open(): OpenModalArguments | boolean;
612
- set modal_open(new_state: OpenModalArguments | boolean);
613
- get merchant(): string;
614
- set merchant(tenant: string);
615
- get market(): string;
616
- set market(market: string);
617
- fetchSearchResults(query: string, filters?: SearchFilter[], maxResults?: number): Promise<([OutputDisplay] extends [never] ? InputDisplay : ModernDisplayWithPageUrl<OutputDisplay>)[]>;
634
+ #private;
635
+ constructor({
636
+ unique_instance_key_for_state,
637
+ search_query_url_param_name: search_query_url_param_name_,
638
+ url_transformer,
639
+ on_navigation,
640
+ enable_category_suggestions,
641
+ page_url_creator,
642
+ disable_scrolling_during_modal,
643
+ api,
644
+ bottom_distance_under_modal,
645
+ render_instant_card,
646
+ ...props_on_class
647
+ }: ConstructorOptions<InputDisplay, OutputDisplay>);
648
+ get on_navigation(): OnNavigation;
649
+ set on_navigation(new_function: OnNavigation);
650
+ get localization(): search_i18n;
651
+ set localization(locale_obj: search_i18n);
652
+ get modal_open(): OpenModalArguments | boolean;
653
+ set modal_open(new_state: OpenModalArguments | boolean);
654
+ get merchant(): string;
655
+ set merchant(tenant: string);
656
+ get market(): string;
657
+ set market(market: string);
658
+ fetchSearchResults(query: string, filters?: SearchFilter[], maxResults?: number): Promise<([OutputDisplay] extends [never] ? InputDisplay : ModernDisplayWithPageUrl<OutputDisplay>)[]>;
618
659
  }
619
660
  export function SearchPage<OriginalDisplay extends Display, TransformedDisplay extends never | ModernDisplay>(props: {
620
- depict_search: DepictSearch<OriginalDisplay, TransformedDisplay>;
621
- include_input_field?: boolean | {
622
- on_open_?: VoidFunction;
623
- on_close_?: VoidFunction;
624
- };
625
- grid_spacing: SDKGridSpacing;
626
- cols_at_size: SDKColsAtSize;
627
- product_card_template: ProductCardTemplate<[
628
- TransformedDisplay
629
- ] extends [never] ? OriginalDisplay : ModernDisplayWithPageUrl<TransformedDisplay>>;
630
- extra_depict_options?: {
631
- recommendations_cols_at_size?: SDKColsAtSize;
632
- };
661
+ depict_search: DepictSearch<OriginalDisplay, TransformedDisplay>;
662
+ include_input_field?: boolean | {
663
+ on_open_?: VoidFunction;
664
+ on_close_?: VoidFunction;
665
+ };
666
+ grid_spacing: SDKGridSpacing;
667
+ cols_at_size: SDKColsAtSize;
668
+ product_card_template: ProductCardTemplate<[TransformedDisplay] extends [never] ? OriginalDisplay : ModernDisplayWithPageUrl<TransformedDisplay>>;
669
+ extra_depict_options?: {
670
+ recommendations_cols_at_size?: SDKColsAtSize;
671
+ };
633
672
  }): import("@depict-ai/utilishared").Node_Array;
634
673
  interface SearchFieldParams {
635
- depict_search: DepictSearch<any>;
636
- modal_dispose_handler?: VoidFunction;
637
- click_handler?: (this: HTMLDivElement, ev: MouseEvent) => any;
638
- aligner_ref?: HTMLElement | null;
674
+ depict_search: DepictSearch<any>;
675
+ modal_dispose_handler?: VoidFunction;
676
+ click_handler?: (this: HTMLDivElement, ev: MouseEvent) => any;
677
+ aligner_ref?: HTMLElement | null;
639
678
  }
640
679
  export function SearchField(props: SearchFieldParams): import("@depict-ai/utilishared").Node_Array;
641
680
  export type BaseProviderConfig<InputDisplay extends Display, PossibleTransformedDisplay extends ModernDisplay | never> = {
642
- /**
643
- * The merchant to use for the search.
644
- * @example "YOUR_MERCHANT", "stronger"
645
- */
646
- merchant: string;
647
- /**
648
- * The market to use for the search.
649
- * @example "YOUR_MARKET", "no", "en-de"
650
- */
651
- market: string;
652
- /**
653
- * Optional unique identifier of a logged in user. Should be persistent across devices and sessions.
654
- */
655
- userId?: string;
656
- /**
657
- * Optional unique identifer of the current session. Only necessary when performing server side requests to Depict.
658
- */
659
- sessionId?: string;
660
- /**
661
- * Custom metadata to be sent with each request to the Depict API. Only necessary if specifically instructed by Depict.
662
- */
663
- metaData?: Record<string, string>;
664
- /**
665
- * 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.
666
- * This is because there's state in the URL and history.state and the state of the different instances would collide.
667
- * By setting this property, you can specify a unique key for each instance, so that the state of each instance is kept separate.
668
- * We recommend to just use an incrementing number for this, e.g. "1", "2", "3", ...
669
- */
670
- uniqueInstanceKeyForState?: string;
681
+ /**
682
+ * The merchant to use for the search.
683
+ * @example "YOUR_MERCHANT", "stronger"
684
+ */
685
+ merchant: string;
686
+ /**
687
+ * The market to use for the search.
688
+ * @example "YOUR_MARKET", "no", "en-de"
689
+ */
690
+ market: string;
691
+ /**
692
+ * Optional unique identifier of a logged in user. Should be persistent across devices and sessions.
693
+ */
694
+ userId?: string;
695
+ /**
696
+ * Optional unique identifer of the current session. Only necessary when performing server side requests to Depict.
697
+ */
698
+ sessionId?: string;
699
+ /**
700
+ * Custom metadata to be sent with each request to the Depict API. Only necessary if specifically instructed by Depict.
701
+ */
702
+ metaData?: Record<string, string>;
703
+ /**
704
+ * 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.
705
+ * This is because there's state in the URL and history.state and the state of the different instances would collide.
706
+ * By setting this property, you can specify a unique key for each instance, so that the state of each instance is kept separate.
707
+ * We recommend to just use an incrementing number for this, e.g. "1", "2", "3", ...
708
+ */
709
+ uniqueInstanceKeyForState?: string;
671
710
  } & (InputDisplay extends ModernDisplay ? "page_url" extends keyof InputDisplay["variant_displays"][number] ? {
672
- pageURLCreator?: PageURLCreator<InputDisplay, PossibleTransformedDisplay>;
711
+ pageURLCreator?: PageURLCreator<InputDisplay, PossibleTransformedDisplay>;
673
712
  } : {
674
- pageURLCreator: PageURLCreator<InputDisplay, PossibleTransformedDisplay>;
713
+ pageURLCreator: PageURLCreator<InputDisplay, PossibleTransformedDisplay>;
675
714
  } : {
676
- pageURLCreator?: never;
715
+ pageURLCreator?: never;
677
716
  });
678
717
  export type BaseSearchProviderConfig = {
679
- /**
680
- * The path to the search page.
681
- * @example "/search", "/sok"
682
- */
683
- searchPagePath: string;
684
- /**
685
- * The name of the url parameter that will be used for the search query.
686
- * @example "q", "search_query", "query"
687
- * @default "query"
688
- */
689
- urlParamName?: string;
690
- /**
691
- * Whether to enable category suggestions in the search modal and search page.
692
- * @default false
693
- */
694
- enableCategorySuggestions?: boolean;
718
+ /**
719
+ * The path to the search page.
720
+ * @example "/search", "/sok"
721
+ */
722
+ searchPagePath: string;
723
+ /**
724
+ * The name of the url parameter that will be used for the search query.
725
+ * @example "q", "search_query", "query"
726
+ * @default "query"
727
+ */
728
+ urlParamName?: string;
729
+ /**
730
+ * Whether to enable category suggestions in the search modal and search page.
731
+ * @default false
732
+ */
733
+ enableCategorySuggestions?: boolean;
695
734
  };
696
735
  export interface BaseProductListingConfig {
697
- /**
698
- * How many columns to show at each media size.
699
- * @default
700
- * [[2, 901], [3, 1024], [4]]
701
- * @example
702
- * [[2, 901], [3, 1024], [4]]
703
- * means 2 columns at sizes up to 901px, 3 columns at sizes up to 1024px and after that 4 columns at any viewport size.
704
- */
705
- columnsAtSize?: SDKColsAtSize;
706
- /**
707
- * The spacing between products.
708
- * @default "2%"
709
- * @example
710
- * "2%", "10px", "1rem", {horizontal: "1%", vertical: "5px"}
711
- */
712
- gridSpacing?: SDKGridSpacing;
736
+ /**
737
+ * How many columns to show at each media size.
738
+ * @default
739
+ * [[2, 901], [3, 1024], [4]]
740
+ * @example
741
+ * [[2, 901], [3, 1024], [4]]
742
+ * means 2 columns at sizes up to 901px, 3 columns at sizes up to 1024px and after that 4 columns at any viewport size.
743
+ */
744
+ columnsAtSize?: SDKColsAtSize;
745
+ /**
746
+ * The spacing between products.
747
+ * @default "2%"
748
+ * @example
749
+ * "2%", "10px", "1rem", {horizontal: "1%", vertical: "5px"}
750
+ */
751
+ gridSpacing?: SDKGridSpacing;
713
752
  }
714
753
  export interface BaseSearchPageConfig extends BaseProductListingConfig {
715
- /**
716
- * Whether to show the search input field in the search page.
717
- * @default true
718
- */
719
- includeInputField?: boolean;
754
+ /**
755
+ * Whether to show the search input field in the search page.
756
+ * @default true
757
+ */
758
+ includeInputField?: boolean;
720
759
  }
721
760
  export interface BaseCategoryPageConfig extends BaseProductListingConfig {
722
- /**
723
- * Whether to show the breadcrumbs in the category page.
724
- * @default true
725
- */
726
- showBreadcrumbs?: boolean;
727
- /**
728
- * Whether to show the quicklinks in the category page.
729
- * @default true
730
- */
731
- showQuicklinks?: boolean;
761
+ /**
762
+ * Whether to show the breadcrumbs in the category page.
763
+ * @default true
764
+ */
765
+ showBreadcrumbs?: boolean;
766
+ /**
767
+ * Whether to show the quicklinks in the category page.
768
+ * @default true
769
+ */
770
+ showQuicklinks?: boolean;
732
771
  }
733
772
  type CenteredLocation = {
734
- location?: "centered";
773
+ location?: "centered";
735
774
  };
736
775
  type AlignedLocation = {
737
- location: "aligned";
738
- element: HTMLElement;
776
+ location: "aligned";
777
+ element: HTMLElement;
739
778
  };
740
779
  /**
741
780
  * How the modal should be opened.
742
781
  */
743
782
  type ModalLocation = AlignedLocation | CenteredLocation;
744
783
  type OpenModalParams<OriginalDisplay extends Display, OutputDisplay extends ModernDisplay | never> = ModalLocation & {
745
- search: DepictSearch<OriginalDisplay, OutputDisplay>;
746
- /**
747
- * If true, the search field in the modal opened will be empty and de-coupled from the other SearchFields.
748
- */
749
- makesNewSearch?: boolean;
784
+ search: DepictSearch<OriginalDisplay, OutputDisplay>;
785
+ /**
786
+ * If true, the search field in the modal opened will be empty and de-coupled from the other SearchFields.
787
+ */
788
+ makesNewSearch?: boolean;
750
789
  };
751
790
  /**
752
791
  * Open the modal with support for alignment.
@@ -755,11 +794,11 @@ type OpenModalParams<OriginalDisplay extends Display, OutputDisplay extends Mode
755
794
  export const open_modal_with_alignment: <OriginalDisplay extends Display, OutputDisplay extends ModernDisplay>(openModalParams: OpenModalParams<OriginalDisplay, OutputDisplay>) => void;
756
795
  export function open_search_with_shift_slash(open_search: VoidFunction): () => void;
757
796
  export interface PageReplacer {
758
- readonly render_: () => Node_Array;
759
- readonly is_page_: (url: URL) => boolean;
760
- readonly title_?: string;
761
- readonly selector_: string;
762
- readonly append_instead_of_replace_?: boolean;
797
+ readonly render_: () => Node_Array;
798
+ readonly is_page_: (url: URL) => boolean;
799
+ readonly title_?: string;
800
+ readonly selector_: string;
801
+ readonly append_instead_of_replace_?: boolean;
763
802
  }
764
803
  /**
765
804
  * PageReplacer is a class that can be used to layer an SPA (single page application) on top of a non-SPA, for certain pages.
@@ -773,18 +812,21 @@ export interface PageReplacer {
773
812
  * @param append_instead_of_replace_ If true, the replacement element will be appended to the element that is found by selector_ instead of replacing it. This is useful if one doesn't actually want it to replace the element because one has other logic.
774
813
  */
775
814
  export class PageReplacer extends EventTarget {
776
- #private;
777
- /**
778
- * Returns if the "replacement page" is currently open
779
- */
780
- get open_(): boolean;
781
- /**
782
- * Stops listening to URL changes and closes the page (if it is currently open)
783
- */
784
- destroy_(): void;
785
- constructor({ is_spa_, ...options }: Omit<PageReplacer, "destroy_" | "addEventListener" | "removeEventListener" | "dispatchEvent" | "open_"> & {
786
- is_spa_?: boolean;
787
- });
815
+ #private;
816
+ /**
817
+ * Returns if the "replacement page" is currently open
818
+ */
819
+ get open_(): boolean;
820
+ /**
821
+ * Stops listening to URL changes and closes the page (if it is currently open)
822
+ */
823
+ destroy_(): void;
824
+ constructor({
825
+ is_spa_,
826
+ ...options
827
+ }: Omit<PageReplacer, "destroy_" | "addEventListener" | "removeEventListener" | "dispatchEvent" | "open_"> & {
828
+ is_spa_?: boolean;
829
+ });
788
830
  }
789
831
  /**
790
832
  * makes so that links to the previous page close the search instead of closing the search and reloading the page (to be used with non-spas)
@@ -792,8 +834,11 @@ export class PageReplacer extends EventTarget {
792
834
  export function setup_fast_leave(pr: PageReplacer): void;
793
835
  export const defaultColsAtSize: SDKColsAtSize;
794
836
  export const defaultGridSpacing = "2%";
795
- export const defaultCategoryTitlePlugin: ({ category_title_, product_count_, }: {
796
- category_title_: import("solid-js").Accessor<string | undefined>;
797
- product_count_: import("solid-js").JSX.Element;
837
+ export const defaultCategoryTitlePlugin: ({
838
+ category_title_,
839
+ product_count_
840
+ }: {
841
+ category_title_: import("solid-js").Accessor<string | undefined>;
842
+ product_count_: import("solid-js").JSX.Element;
798
843
  }) => import("solid-js").JSX.Element;
799
- export type { SearchFilter } from "@depict-ai/types/api/SearchRequest";
844
+ export type { SearchFilter } from "@depict-ai/types/api/SearchRequest";