@depict-ai/ui 4.3.1 → 4.3.3
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.
- package/ES10/index.cjs +327 -203
- package/ES10/index.d.ts +242 -235
- package/ES10/index.js +361 -237
- package/latest/index.cjs +307 -188
- package/latest/index.d.ts +242 -235
- package/latest/index.js +341 -222
- package/package.json +2 -2
- package/server/ES10/index.cjs +312 -197
- package/server/ES10/index.d.ts +242 -235
- package/server/ES10/index.js +352 -237
- package/server/latest/index.cjs +290 -180
- package/server/latest/index.d.ts +242 -235
- package/server/latest/index.js +330 -220
package/server/latest/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { JSX, Accessor, Signal, Setter } from "solid-js";
|
|
2
|
-
import { Display, ColsAtSize, report, Amazing_Slider,
|
|
2
|
+
import { Display, ColsAtSize, report, Amazing_Slider, Elem, ModernDisplay, TwoLetterMarket, Node_Array } from "@depict-ai/utilishared/latest";
|
|
3
3
|
import { SearchFilter, SearchRequestV3, SortModel } from "@depict-ai/types/api/SearchRequestV3";
|
|
4
4
|
import { ContentLink, SearchResponse, SearchFilter as _SearchFilter1 } from "@depict-ai/types/api/SearchResponse";
|
|
5
5
|
import { Ancestors, ListingSuggestion, SearchSuggestionsResponseV3 } from "@depict-ai/types/api/SearchSuggestionsResponseV3";
|
|
@@ -10,7 +10,7 @@ import { ProductListingRequestV3 } from "@depict-ai/types/api/ProductListingRequ
|
|
|
10
10
|
import { GetListingRequest } from "@depict-ai/types/api/GetListingRequest";
|
|
11
11
|
import { BaseSearchRequestV3 } from "@depict-ai/types/api/BaseSearchRequestV3";
|
|
12
12
|
import { SearchFilter as _SearchFilter3 } from "@depict-ai/types/api/SearchRequestV2";
|
|
13
|
-
export const version = "4.3.
|
|
13
|
+
export const version = "4.3.3";
|
|
14
14
|
declare const LISTING_ID = "listingId";
|
|
15
15
|
declare const EXTERNAL_ID = "externalId";
|
|
16
16
|
type ScrollRestorationData = {
|
|
@@ -214,6 +214,10 @@ export function ShopifyResponsiveImg(props: {
|
|
|
214
214
|
src: string;
|
|
215
215
|
loading?: "eager" | "lazy" | "force-lazy";
|
|
216
216
|
customUrls?: (url: string, width: number) => string;
|
|
217
|
+
/**
|
|
218
|
+
* When `true`, data written for ShopifyContainedImage's `autoAdjustAspectRatio` feature will only be allowed to be written the load after the image src has changed. This is to make css transitions on images whose size is animated smoother (since aspect ratio changing minimally as size changes will cause the transition to restart)
|
|
219
|
+
*/
|
|
220
|
+
keyRatioUpdating?: boolean;
|
|
217
221
|
} & Omit<JSX.ImgHTMLAttributes<HTMLImageElement>, "srcset" | "src" | "sizes" | "loading">): JSX.Element;
|
|
218
222
|
export const shopifyContainedImageContextSymbol: unique symbol;
|
|
219
223
|
/**
|
|
@@ -225,13 +229,13 @@ export const shopifyContainedImageContextSymbol: unique symbol;
|
|
|
225
229
|
* @property aspectRatio aspect ratio of the image
|
|
226
230
|
* @property class extra class to add to the container
|
|
227
231
|
* @property alt alt text for the image
|
|
228
|
-
* @property autoAdjustAspectRatio whether to automatically adjust the aspect ratio of the image to the majority of the aspect ratios of loaded images in the current listing provider. Defaults to false. Can be overriden with css variable --image-aspect-ratio.
|
|
232
|
+
* @property autoAdjustAspectRatio whether to automatically adjust the aspect ratio of the image to the majority of the aspect ratios of loaded images in the current listing provider. Defaults to false. Can be overriden with css variable --image-aspect-ratio.
|
|
229
233
|
* @property imgProps props to pass to ShopifyResponsiveImg to add to the <img> element
|
|
230
234
|
*/
|
|
231
235
|
export function ShopifyContainedImage(props: {
|
|
232
236
|
src: string;
|
|
233
237
|
aspectRatio: number | string;
|
|
234
|
-
autoAdjustAspectRatio?: boolean
|
|
238
|
+
autoAdjustAspectRatio?: boolean;
|
|
235
239
|
class?: string;
|
|
236
240
|
imgProps?: Omit<Parameters<typeof ShopifyResponsiveImg>[0], "size" | "src">;
|
|
237
241
|
}): HTMLDivElement;
|
|
@@ -240,86 +244,110 @@ export function ShopifyContainedImage(props: {
|
|
|
240
244
|
*/
|
|
241
245
|
export function ModernResponsiveContainedImage(props: Parameters<typeof ShopifyContainedImage>[0]): import("solid-js").JSX.Element;
|
|
242
246
|
/**
|
|
243
|
-
*
|
|
244
|
-
*/
|
|
245
|
-
export function LooksSlider(props: {
|
|
246
|
-
gridSpacing_: SDKGridSpacing;
|
|
247
|
-
columnsAtSize_: SDKColsAtSize;
|
|
248
|
-
productId_: string;
|
|
249
|
-
merchant_: string;
|
|
250
|
-
market_: string;
|
|
251
|
-
locale_: string;
|
|
252
|
-
imagePlaceholderAspectRatio_: number | string;
|
|
253
|
-
title_?: JSX.Element;
|
|
254
|
-
FavoriteButton_?: (props: {
|
|
255
|
-
display_: Accessor<ModernDisplay | null | undefined>;
|
|
256
|
-
}) => JSX.Element;
|
|
257
|
-
}): HTMLDivElement;
|
|
258
|
-
export const prefixes_to_preserve_in_history_dot_state: Set<string>;
|
|
259
|
-
/**
|
|
260
|
-
* Prevent, usually SPAs, from deleting our stuff from history.state when they call history.pushState with a new object they have constructed. This will only run once no matter how often it's called.
|
|
261
|
-
*/
|
|
262
|
-
export function preserve_items_in_history_dot_state(): void;
|
|
263
|
-
/**
|
|
264
|
-
* This function is used to determine if the user is trying to open a link in a new tab or window, and we therefore should not single page navigate
|
|
265
|
-
* @param clickEvent The click event that triggered the navigation
|
|
266
|
-
*/
|
|
267
|
-
export function allowNativeNavigation(clickEvent?: MouseEvent): number | boolean | undefined;
|
|
268
|
-
/**
|
|
269
|
-
* Symbol used to identify the version of a SearchModal function. Values right now: 1 = 1st gen classic modal, 2 = second gen modal
|
|
247
|
+
* PLP internationalisation shared between search and category listing
|
|
270
248
|
*/
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
249
|
+
type plp_shared_i18n = {
|
|
250
|
+
backend_locale_: string;
|
|
251
|
+
scroll_to_top_: string;
|
|
252
|
+
back_: string;
|
|
253
|
+
open_sorting_: string;
|
|
254
|
+
close_sorting_: string;
|
|
255
|
+
open_filters_: string;
|
|
256
|
+
close_filters_: string;
|
|
257
|
+
close_: string;
|
|
258
|
+
ok_: string;
|
|
259
|
+
filters_cleared_: string;
|
|
260
|
+
we_cleared_your_filters_: string;
|
|
261
|
+
restore_: string;
|
|
262
|
+
sorting_text_: string;
|
|
263
|
+
filter_text_: string;
|
|
264
|
+
selected_filters_title_: string;
|
|
265
|
+
filters_: string;
|
|
266
|
+
view_less_: string;
|
|
267
|
+
view_more_: string;
|
|
268
|
+
/**
|
|
269
|
+
* Also used for "clear all" in previous searches (TextSuggestions)
|
|
270
|
+
*/
|
|
271
|
+
clear_all_from_filter_crumbs_: string;
|
|
272
|
+
clear_individual_filter_: string;
|
|
273
|
+
of_: string;
|
|
274
|
+
clear_all_filters_from_big_button_: string;
|
|
275
|
+
try_without_filters_: string;
|
|
276
|
+
range_filter_low_point_aria_label_: string;
|
|
277
|
+
range_filter_high_point_aria_label_: string;
|
|
278
|
+
morphing_sign_expanded_aria_label_: string;
|
|
279
|
+
morphing_sign_collapsed_aria_label_: string;
|
|
280
|
+
search_a_filter_: (filter_section: string) => string;
|
|
281
|
+
breadcrumbs_aria_label_: string;
|
|
282
|
+
breadcrumbs_separator_: string;
|
|
283
|
+
price_formatting_: {
|
|
284
|
+
pre_: string;
|
|
285
|
+
post_: string;
|
|
286
|
+
decimal_places_delimiter_: string;
|
|
287
|
+
thousands_delimiter_: string;
|
|
288
|
+
places_after_comma_: number | "auto";
|
|
289
|
+
};
|
|
276
290
|
};
|
|
277
291
|
/**
|
|
278
|
-
*
|
|
279
|
-
*/
|
|
280
|
-
export const ALIGN_TOP = 1;
|
|
281
|
-
/**
|
|
282
|
-
* Flag to align by left
|
|
283
|
-
*/
|
|
284
|
-
export const ALIGN_LEFT = 2;
|
|
285
|
-
/**
|
|
286
|
-
* Flag to also align the width of the modal to the element
|
|
287
|
-
*/
|
|
288
|
-
export const ALIGN_WIDTH_ON_MODAL = 4;
|
|
289
|
-
/**
|
|
290
|
-
* Whether to align the center of the element to align to, to the center of the modal. If set, `transform: translateX(-50%)` will also be applied to the modal
|
|
292
|
+
* Search internationalisation
|
|
291
293
|
*/
|
|
292
|
-
|
|
294
|
+
interface search_i18n extends plp_shared_i18n {
|
|
295
|
+
placeholder_text_: string;
|
|
296
|
+
show_n_results_: (number_of_results: HTMLElement) => Elem[];
|
|
297
|
+
no_results_text_: string;
|
|
298
|
+
no_products_: string;
|
|
299
|
+
search_recs_title_: string;
|
|
300
|
+
clear_filters_query_sorting_after_submit_: string;
|
|
301
|
+
modal_view_all_results_: (number_of_results: HTMLElement) => Elem[];
|
|
302
|
+
modal_discover_more_: string;
|
|
303
|
+
get_showing_results_for_: (query: HTMLElement, number_of_results_element: HTMLElement, has_query: boolean, number_of_results: number | undefined) => Elem[];
|
|
304
|
+
get_showing_pages_for_: (query: HTMLElement, number_of_results_element: HTMLElement, has_query: boolean, number_of_results: number | undefined) => Elem[];
|
|
305
|
+
previous_searches_text_: string;
|
|
306
|
+
category_: string;
|
|
307
|
+
brand_: string;
|
|
308
|
+
suggestions_: string;
|
|
309
|
+
search_submit_button_aria_label_: string;
|
|
310
|
+
search_field_field_aria_label_: string;
|
|
311
|
+
previous_searches_delete_entry_from_history_: string;
|
|
312
|
+
listing_suggestions_: string;
|
|
313
|
+
content_: string;
|
|
314
|
+
previous_: string;
|
|
315
|
+
popular_: string;
|
|
316
|
+
products_: string;
|
|
317
|
+
}
|
|
293
318
|
/**
|
|
294
|
-
*
|
|
295
|
-
* @param alignmentSignals a signal containing the style properties that will be applied to the modal body and serach field. You provide it to open_modal_ as `alignmentSignals_` when using SearchModal
|
|
296
|
-
* @param input_field the element to align to.
|
|
297
|
-
* @param alignment a bitmask of ALIGN_TOP, ALIGN_LEFT, ALIGN_WIDTH to determine how to align. Example: `ALIGN_TOP | ALIGN_LEFT` aligns both top and left
|
|
298
|
-
* @param includeScroll Should the aligner offset with scrolling? Useful to set to false when using position: fixed
|
|
299
|
-
* @param pollAlignment a reactive accessor, for the duration that it returns true the alignment will be re-ran every frame. Useful for when you're aligning to a moving element that doesn't change its width.
|
|
300
|
-
* @returns a function that can be called any time to re-run the alignment routine in case that the elements have gone out of alignment
|
|
319
|
+
* Category internationalisation
|
|
301
320
|
*/
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
321
|
+
interface category_i18n extends plp_shared_i18n {
|
|
322
|
+
show_n_products_: (number_of_results: HTMLElement) => Elem[];
|
|
323
|
+
no_products_text_: string;
|
|
324
|
+
product_: string;
|
|
325
|
+
products_: string;
|
|
326
|
+
quicklinks_aria_label_: string;
|
|
327
|
+
}
|
|
306
328
|
/**
|
|
307
|
-
*
|
|
308
|
-
*
|
|
309
|
-
*
|
|
310
|
-
* Creates a sort of debounced/throttled resource - if the dependency changes while the fetcher is not running, the fetcher will instantly run. If the dependency changes while the fetcher is running, the fetcher will not run but a fetch with the dependency value will be queued. If the fetcher is already queued, the queued fetcher will be replaced with the new one. Once the running fetcher finishes, the queued fetcher will run.
|
|
311
|
-
*
|
|
312
|
-
* Caveats: the owner of the fetched might/will be incorrect, the resource will never have an error, instead the resource value will become undefined.
|
|
329
|
+
* For anything that is not exposed and only used internally we can use solid signals to get more performant rendering.
|
|
330
|
+
* For anything that can be used outside of solid, like Product Cards and InstantCards these types should not be used.
|
|
313
331
|
*
|
|
314
|
-
*
|
|
315
|
-
* @param fetcher The function that fetches the resource, it receives the dependency value as an argument
|
|
332
|
+
* Any solid_ type below should not be exposed outside of this library, as the accessors can be confusing and unnecessary.
|
|
316
333
|
*/
|
|
317
|
-
|
|
334
|
+
/** For internal components using i18n that gets wrapped in solid's Accessors */
|
|
335
|
+
type solid_plp_shared_i18n = { [K in keyof plp_shared_i18n]: Accessor<plp_shared_i18n[K]> };
|
|
336
|
+
/** For internal components using i18n that gets wrapped in solid's Accessors */
|
|
337
|
+
type solid_search_i18n = { [K in keyof search_i18n]: Accessor<search_i18n[K]> };
|
|
318
338
|
/**
|
|
319
|
-
*
|
|
320
|
-
* @param fn the function to wrap
|
|
339
|
+
* Like standard_price_format except that the price and the formatting are reactive accessors
|
|
321
340
|
*/
|
|
322
|
-
export function
|
|
341
|
+
export function SolidFormatPrice(props: {
|
|
342
|
+
price_: number;
|
|
343
|
+
price_formatting_: {
|
|
344
|
+
pre_: string;
|
|
345
|
+
post_: string;
|
|
346
|
+
decimal_places_delimiter_: string;
|
|
347
|
+
thousands_delimiter_: string;
|
|
348
|
+
places_after_comma_: number | "auto";
|
|
349
|
+
};
|
|
350
|
+
}): JSX.Element;
|
|
323
351
|
type DisplayTransformerAlwaysThereData = {
|
|
324
352
|
merchant: string;
|
|
325
353
|
market: string;
|
|
@@ -433,111 +461,6 @@ export class DepictAPI<InputDisplay extends Display, OutputDisplay extends Moder
|
|
|
433
461
|
failed?: true | undefined;
|
|
434
462
|
}>;
|
|
435
463
|
}
|
|
436
|
-
/**
|
|
437
|
-
* PLP internationalisation shared between search and category listing
|
|
438
|
-
*/
|
|
439
|
-
type plp_shared_i18n = {
|
|
440
|
-
backend_locale_: string;
|
|
441
|
-
scroll_to_top_: string;
|
|
442
|
-
back_: string;
|
|
443
|
-
open_sorting_: string;
|
|
444
|
-
close_sorting_: string;
|
|
445
|
-
open_filters_: string;
|
|
446
|
-
close_filters_: string;
|
|
447
|
-
close_: string;
|
|
448
|
-
ok_: string;
|
|
449
|
-
filters_cleared_: string;
|
|
450
|
-
we_cleared_your_filters_: string;
|
|
451
|
-
restore_: string;
|
|
452
|
-
sorting_text_: string;
|
|
453
|
-
filter_text_: string;
|
|
454
|
-
selected_filters_title_: string;
|
|
455
|
-
filters_: string;
|
|
456
|
-
view_less_: string;
|
|
457
|
-
view_more_: string;
|
|
458
|
-
/**
|
|
459
|
-
* Also used for "clear all" in previous searches (TextSuggestions)
|
|
460
|
-
*/
|
|
461
|
-
clear_all_from_filter_crumbs_: string;
|
|
462
|
-
clear_individual_filter_: string;
|
|
463
|
-
of_: string;
|
|
464
|
-
clear_all_filters_from_big_button_: string;
|
|
465
|
-
try_without_filters_: string;
|
|
466
|
-
range_filter_low_point_aria_label_: string;
|
|
467
|
-
range_filter_high_point_aria_label_: string;
|
|
468
|
-
morphing_sign_expanded_aria_label_: string;
|
|
469
|
-
morphing_sign_collapsed_aria_label_: string;
|
|
470
|
-
search_a_filter_: (filter_section: string) => string;
|
|
471
|
-
breadcrumbs_aria_label_: string;
|
|
472
|
-
breadcrumbs_separator_: string;
|
|
473
|
-
price_formatting_: {
|
|
474
|
-
pre_: string;
|
|
475
|
-
post_: string;
|
|
476
|
-
decimal_places_delimiter_: string;
|
|
477
|
-
thousands_delimiter_: string;
|
|
478
|
-
places_after_comma_: number | "auto";
|
|
479
|
-
};
|
|
480
|
-
};
|
|
481
|
-
/**
|
|
482
|
-
* Search internationalisation
|
|
483
|
-
*/
|
|
484
|
-
interface search_i18n extends plp_shared_i18n {
|
|
485
|
-
placeholder_text_: string;
|
|
486
|
-
show_n_results_: (number_of_results: HTMLElement) => Elem[];
|
|
487
|
-
no_results_text_: string;
|
|
488
|
-
no_products_: string;
|
|
489
|
-
search_recs_title_: string;
|
|
490
|
-
clear_filters_query_sorting_after_submit_: string;
|
|
491
|
-
modal_view_all_results_: (number_of_results: HTMLElement) => Elem[];
|
|
492
|
-
modal_discover_more_: string;
|
|
493
|
-
get_showing_results_for_: (query: HTMLElement, number_of_results_element: HTMLElement, has_query: boolean, number_of_results: number | undefined) => Elem[];
|
|
494
|
-
get_showing_pages_for_: (query: HTMLElement, number_of_results_element: HTMLElement, has_query: boolean, number_of_results: number | undefined) => Elem[];
|
|
495
|
-
previous_searches_text_: string;
|
|
496
|
-
category_: string;
|
|
497
|
-
brand_: string;
|
|
498
|
-
suggestions_: string;
|
|
499
|
-
search_submit_button_aria_label_: string;
|
|
500
|
-
search_field_field_aria_label_: string;
|
|
501
|
-
previous_searches_delete_entry_from_history_: string;
|
|
502
|
-
listing_suggestions_: string;
|
|
503
|
-
content_: string;
|
|
504
|
-
previous_: string;
|
|
505
|
-
popular_: string;
|
|
506
|
-
products_: string;
|
|
507
|
-
}
|
|
508
|
-
/**
|
|
509
|
-
* Category internationalisation
|
|
510
|
-
*/
|
|
511
|
-
interface category_i18n extends plp_shared_i18n {
|
|
512
|
-
show_n_products_: (number_of_results: HTMLElement) => Elem[];
|
|
513
|
-
no_products_text_: string;
|
|
514
|
-
product_: string;
|
|
515
|
-
products_: string;
|
|
516
|
-
quicklinks_aria_label_: string;
|
|
517
|
-
}
|
|
518
|
-
/**
|
|
519
|
-
* For anything that is not exposed and only used internally we can use solid signals to get more performant rendering.
|
|
520
|
-
* For anything that can be used outside of solid, like Product Cards and InstantCards these types should not be used.
|
|
521
|
-
*
|
|
522
|
-
* Any solid_ type below should not be exposed outside of this library, as the accessors can be confusing and unnecessary.
|
|
523
|
-
*/
|
|
524
|
-
/** For internal components using i18n that gets wrapped in solid's Accessors */
|
|
525
|
-
type solid_plp_shared_i18n = { [K in keyof plp_shared_i18n]: Accessor<plp_shared_i18n[K]> };
|
|
526
|
-
/** For internal components using i18n that gets wrapped in solid's Accessors */
|
|
527
|
-
type solid_search_i18n = { [K in keyof search_i18n]: Accessor<search_i18n[K]> };
|
|
528
|
-
/**
|
|
529
|
-
* Like standard_price_format except that the price and the formatting are reactive accessors
|
|
530
|
-
*/
|
|
531
|
-
export function SolidFormatPrice(props: {
|
|
532
|
-
price_: number;
|
|
533
|
-
price_formatting_: {
|
|
534
|
-
pre_: string;
|
|
535
|
-
post_: string;
|
|
536
|
-
decimal_places_delimiter_: string;
|
|
537
|
-
thousands_delimiter_: string;
|
|
538
|
-
places_after_comma_: number | "auto";
|
|
539
|
-
};
|
|
540
|
-
}): JSX.Element;
|
|
541
464
|
/**
|
|
542
465
|
* Disables scrolling until the solidjs reactive scoped is disposed (onCleanup)
|
|
543
466
|
* @returns A cleanup function to manually re-enable scrolling.
|
|
@@ -568,10 +491,65 @@ export function decode_sorting(search_params: URLSearchParams, sorting_query_par
|
|
|
568
491
|
*/
|
|
569
492
|
export function strip_encoded_filter_and_sort(search_params: URLSearchParams, filter_query_param_prefix: string, sorting_query_param: string): void;
|
|
570
493
|
export function CrossIcon(props?: JSX.SvgSVGAttributes<SVGSVGElement>): SVGElement;
|
|
494
|
+
/**
|
|
495
|
+
* Symbol used to identify the version of a SearchModal function. Values right now: 1 = 1st gen classic modal, 2 = second gen modal
|
|
496
|
+
*/
|
|
497
|
+
export const modalVersionSymbol: unique symbol;
|
|
498
|
+
/**
|
|
499
|
+
* This function is used to determine if the user is trying to open a link in a new tab or window, and we therefore should not single page navigate
|
|
500
|
+
* @param clickEvent The click event that triggered the navigation
|
|
501
|
+
*/
|
|
502
|
+
export function allowNativeNavigation(clickEvent?: MouseEvent): number | boolean | undefined;
|
|
571
503
|
interface Styles {
|
|
572
504
|
[selector: string]: JSX.CSSProperties;
|
|
573
505
|
}
|
|
574
506
|
export const styles_to_valid_css_string: (styles: Styles) => string;
|
|
507
|
+
/**
|
|
508
|
+
* A good way of "debouncing" if one wants to update a value as aggressively as possible without overloading the network or the server. It ensures that as many requests are made as possible without making two requests at once.
|
|
509
|
+
* This is for when you need a solid resource that has an accurate .loading value.
|
|
510
|
+
*
|
|
511
|
+
* Creates a sort of debounced/throttled resource - if the dependency changes while the fetcher is not running, the fetcher will instantly run. If the dependency changes while the fetcher is running, the fetcher will not run but a fetch with the dependency value will be queued. If the fetcher is already queued, the queued fetcher will be replaced with the new one. Once the running fetcher finishes, the queued fetcher will run.
|
|
512
|
+
*
|
|
513
|
+
* Caveats: the owner of the fetched might/will be incorrect, the resource will never have an error, instead the resource value will become undefined.
|
|
514
|
+
*
|
|
515
|
+
* @param dependency The value that the fetcher receives, when it updates the fetcher will run according to the rules described above
|
|
516
|
+
* @param fetcher The function that fetches the resource, it receives the dependency value as an argument
|
|
517
|
+
*/
|
|
518
|
+
export function createDeparallelizedNoDropResource<T, X>(dependency: Accessor<T | undefined | null | false>, fetcher: (dependency: T) => Promise<X>): import("solid-js").Resource<X | undefined>;
|
|
519
|
+
export type ModalAlignmentSignals = {
|
|
520
|
+
body_: Signal<JSX.CSSProperties>;
|
|
521
|
+
field_: Signal<JSX.CSSProperties>;
|
|
522
|
+
backdrop_?: Signal<JSX.CSSProperties>;
|
|
523
|
+
};
|
|
524
|
+
/**
|
|
525
|
+
* Flag to align by top
|
|
526
|
+
*/
|
|
527
|
+
export const ALIGN_TOP = 1;
|
|
528
|
+
/**
|
|
529
|
+
* Flag to align by left
|
|
530
|
+
*/
|
|
531
|
+
export const ALIGN_LEFT = 2;
|
|
532
|
+
/**
|
|
533
|
+
* Flag to also align the width of the modal to the element
|
|
534
|
+
*/
|
|
535
|
+
export const ALIGN_WIDTH_ON_MODAL = 4;
|
|
536
|
+
/**
|
|
537
|
+
* Whether to align the center of the element to align to, to the center of the modal. If set, `transform: translateX(-50%)` will also be applied to the modal
|
|
538
|
+
*/
|
|
539
|
+
export const SET_CENTERED_LEFT = 16;
|
|
540
|
+
/**
|
|
541
|
+
* Useful for aligning the search modal to an element, like an existing input field
|
|
542
|
+
* @param alignmentSignals a signal containing the style properties that will be applied to the modal body and serach field. You provide it to open_modal_ as `alignmentSignals_` when using SearchModal
|
|
543
|
+
* @param input_field the element to align to.
|
|
544
|
+
* @param alignment a bitmask of ALIGN_TOP, ALIGN_LEFT, ALIGN_WIDTH to determine how to align. Example: `ALIGN_TOP | ALIGN_LEFT` aligns both top and left
|
|
545
|
+
* @param includeScroll Should the aligner offset with scrolling? Useful to set to false when using position: fixed
|
|
546
|
+
* @param pollAlignment a reactive accessor, for the duration that it returns true the alignment will be re-ran every frame. Useful for when you're aligning to a moving element that doesn't change its width.
|
|
547
|
+
* @returns a function that can be called any time to re-run the alignment routine in case that the elements have gone out of alignment
|
|
548
|
+
*/
|
|
549
|
+
export function align_field({
|
|
550
|
+
body_: [, setModalBodyStyle],
|
|
551
|
+
field_: [, setModalFiedlStyle]
|
|
552
|
+
}: ModalAlignmentSignals, input_field: HTMLElement, alignment: number, includeScroll?: boolean, pollAlignment?: Accessor<boolean>): () => void;
|
|
575
553
|
/**
|
|
576
554
|
* Second generation search modal - the solid component that gets added to <body> when the search modal is opened
|
|
577
555
|
*/
|
|
@@ -642,6 +620,65 @@ declare function RawSearchModalV2<InputDisplay extends Display, OutputDisplay ex
|
|
|
642
620
|
content_search_enabled_: Accessor<boolean>;
|
|
643
621
|
}): HTMLDivElement[];
|
|
644
622
|
export const SearchModalV2: typeof RawSearchModalV2;
|
|
623
|
+
/**
|
|
624
|
+
* First generation (classic) search modal - the solid component that gets added to <body> when the search modal is opened
|
|
625
|
+
*/
|
|
626
|
+
declare function RawClassicSearchModal({
|
|
627
|
+
search_field_value_: props_search_field_value,
|
|
628
|
+
get_search_query_,
|
|
629
|
+
search_query_url_param_name_,
|
|
630
|
+
previous_searches_,
|
|
631
|
+
close_modal_,
|
|
632
|
+
depict_api_,
|
|
633
|
+
merchant_,
|
|
634
|
+
market_,
|
|
635
|
+
submit_query_: props_submit_query,
|
|
636
|
+
instant_results_options_,
|
|
637
|
+
register_closing_animation_,
|
|
638
|
+
url_transformer_,
|
|
639
|
+
closing_animation_,
|
|
640
|
+
clear_filters_,
|
|
641
|
+
i18n_,
|
|
642
|
+
disable_scrolling_,
|
|
643
|
+
enable_category_suggestions_,
|
|
644
|
+
class_list_,
|
|
645
|
+
bottom_distance_under_modal_,
|
|
646
|
+
selected_text_range_,
|
|
647
|
+
dont_sync_search_field_value_except_on_submit_,
|
|
648
|
+
router_,
|
|
649
|
+
content_search_enabled_,
|
|
650
|
+
alignmentSignals_
|
|
651
|
+
}: {
|
|
652
|
+
search_field_value_: Signal<string>;
|
|
653
|
+
get_search_query_: Accessor<string>;
|
|
654
|
+
search_query_url_param_name_: string;
|
|
655
|
+
previous_searches_: Signal<string[]>;
|
|
656
|
+
close_modal_: VoidFunction;
|
|
657
|
+
depict_api_: DepictAPI<any>;
|
|
658
|
+
clear_filters_: (user_triggered: boolean) => void;
|
|
659
|
+
merchant_: Accessor<string>;
|
|
660
|
+
market_: Accessor<TwoLetterMarket>;
|
|
661
|
+
submit_query_: (new_query?: string) => void;
|
|
662
|
+
class_list_?: Accessor<Record<string, boolean>>;
|
|
663
|
+
url_transformer_?: (url_object: URL) => unknown;
|
|
664
|
+
disable_scrolling_?: boolean;
|
|
665
|
+
closing_animation_?: () => Promise<any>;
|
|
666
|
+
register_closing_animation_: (animation: () => Promise<any>) => void;
|
|
667
|
+
bottom_distance_under_modal_?: Accessor<number | undefined>;
|
|
668
|
+
alignmentSignals_?: ModalAlignmentSignals;
|
|
669
|
+
selected_text_range_?: [number | null, number | null];
|
|
670
|
+
router_: PseudoRouter;
|
|
671
|
+
instant_results_options_: {
|
|
672
|
+
min_products_to_fetch_: number;
|
|
673
|
+
has_sort_or_filters_: Accessor<boolean>;
|
|
674
|
+
};
|
|
675
|
+
i18n_: solid_search_i18n;
|
|
676
|
+
/** Should we include category suggestions. Defaults to true */
|
|
677
|
+
enable_category_suggestions_?: boolean;
|
|
678
|
+
dont_sync_search_field_value_except_on_submit_?: boolean;
|
|
679
|
+
content_search_enabled_: Accessor<boolean>;
|
|
680
|
+
}): HTMLDivElement[];
|
|
681
|
+
export const ClassicSearchModal: typeof RawClassicSearchModal;
|
|
645
682
|
type PossibleLayout = "grid" | "slider" | "slider-without-filters";
|
|
646
683
|
export type BaseProviderConfig<InputDisplay extends Display, PossibleTransformedDisplay extends ModernDisplay | never> = {
|
|
647
684
|
/**
|
|
@@ -825,64 +862,34 @@ declare class PseudoRouter {
|
|
|
825
862
|
constructor(on_navigation: OnNavigation, listing_query_state_key?: string);
|
|
826
863
|
}
|
|
827
864
|
/**
|
|
828
|
-
*
|
|
865
|
+
* Render a grid with provided recommendations. displayTransformers will not be applied for this since you yourself provide the displays. Options are reactive.
|
|
829
866
|
*/
|
|
830
|
-
|
|
831
|
-
|
|
832
|
-
|
|
833
|
-
|
|
834
|
-
|
|
835
|
-
|
|
836
|
-
|
|
837
|
-
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
|
|
841
|
-
|
|
842
|
-
|
|
843
|
-
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
|
|
847
|
-
|
|
848
|
-
|
|
849
|
-
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
|
|
854
|
-
|
|
855
|
-
|
|
856
|
-
search_field_value_: Signal<string>;
|
|
857
|
-
get_search_query_: Accessor<string>;
|
|
858
|
-
search_query_url_param_name_: string;
|
|
859
|
-
previous_searches_: Signal<string[]>;
|
|
860
|
-
close_modal_: VoidFunction;
|
|
861
|
-
depict_api_: DepictAPI<any>;
|
|
862
|
-
clear_filters_: (user_triggered: boolean) => void;
|
|
863
|
-
merchant_: Accessor<string>;
|
|
864
|
-
market_: Accessor<TwoLetterMarket>;
|
|
865
|
-
submit_query_: (new_query?: string) => void;
|
|
866
|
-
class_list_?: Accessor<Record<string, boolean>>;
|
|
867
|
-
url_transformer_?: (url_object: URL) => unknown;
|
|
868
|
-
disable_scrolling_?: boolean;
|
|
869
|
-
closing_animation_?: () => Promise<any>;
|
|
870
|
-
register_closing_animation_: (animation: () => Promise<any>) => void;
|
|
871
|
-
bottom_distance_under_modal_?: Accessor<number | undefined>;
|
|
872
|
-
alignmentSignals_?: ModalAlignmentSignals;
|
|
873
|
-
selected_text_range_?: [number | null, number | null];
|
|
874
|
-
router_: PseudoRouter;
|
|
875
|
-
instant_results_options_: {
|
|
876
|
-
min_products_to_fetch_: number;
|
|
877
|
-
has_sort_or_filters_: Accessor<boolean>;
|
|
878
|
-
};
|
|
879
|
-
i18n_: solid_search_i18n;
|
|
880
|
-
/** Should we include category suggestions. Defaults to true */
|
|
881
|
-
enable_category_suggestions_?: boolean;
|
|
882
|
-
dont_sync_search_field_value_except_on_submit_?: boolean;
|
|
883
|
-
content_search_enabled_: Accessor<boolean>;
|
|
884
|
-
}): HTMLDivElement[];
|
|
885
|
-
export const ClassicSearchModal: typeof RawClassicSearchModal;
|
|
867
|
+
export function LooksSlider(props: {
|
|
868
|
+
gridSpacing_: SDKGridSpacing;
|
|
869
|
+
columnsAtSize_: SDKColsAtSize;
|
|
870
|
+
productId_: string;
|
|
871
|
+
merchant_: string;
|
|
872
|
+
market_: string;
|
|
873
|
+
locale_: string;
|
|
874
|
+
imagePlaceholderAspectRatio_: number | string;
|
|
875
|
+
title_?: JSX.Element;
|
|
876
|
+
FavoriteButton_?: (props: {
|
|
877
|
+
display_: Accessor<ModernDisplay | null | undefined>;
|
|
878
|
+
}) => JSX.Element;
|
|
879
|
+
displayTransformers_?: DisplayTransformers<ModernDisplay, ModernDisplayWithPageUrl<ModernDisplay>>;
|
|
880
|
+
onNavigation_?: OnNavigation;
|
|
881
|
+
priceFormatting_: plp_shared_i18n["price_formatting_"];
|
|
882
|
+
}): HTMLDivElement;
|
|
883
|
+
export const prefixes_to_preserve_in_history_dot_state: Set<string>;
|
|
884
|
+
/**
|
|
885
|
+
* Prevent, usually SPAs, from deleting our stuff from history.state when they call history.pushState with a new object they have constructed. This will only run once no matter how often it's called.
|
|
886
|
+
*/
|
|
887
|
+
export function preserve_items_in_history_dot_state(): void;
|
|
888
|
+
/**
|
|
889
|
+
* Wraps a function in a try/catch block and throws the error globally. If undefined is provided as fn, a no-op is returned.
|
|
890
|
+
* @param fn the function to wrap
|
|
891
|
+
*/
|
|
892
|
+
export function throw_globally<T extends (...args: any) => any>(fn?: T): (...args: Parameters<T>) => ReturnType<T> | undefined;
|
|
886
893
|
/**
|
|
887
894
|
* Renders a set of tabs
|
|
888
895
|
* Will ignore any children that's not a <Tab />
|