@depict-ai/ui 1.0.18 → 1.1.0

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/README.md CHANGED
@@ -1,3 +1,7 @@
1
1
  # Depict UI base package
2
2
 
3
- You're most likely for https://www.npmjs.com/package/@depict-ai/js-ui or https://www.npmjs.com/package/@depict-ai/react-ui
3
+ You're most likely looking for https://www.npmjs.com/package/@depict-ai/js-ui or https://www.npmjs.com/package/@depict-ai/react-ui
4
+
5
+ Breaking changes:
6
+
7
+ - 1.1.0 made the `include_input_field` option of `SearchPage` default to true
@@ -229,10 +229,23 @@ class $e1d6c0f3d89d531c$export$e015ed2f2950f2e3 {
229
229
  let resolve_in_progress;
230
230
  cache_obj.in_progress_[body] = new Promise((r)=>resolve_in_progress = r);
231
231
  try {
232
- const search_results = await (0, $57o7A$depictaiutilishared.fetch_retry)((0, $57o7A$depictaiutilishared.add_version_query_params)(endpoint1), {
232
+ let search_results = await (0, $57o7A$depictaiutilishared.fetch_retry)((0, $57o7A$depictaiutilishared.add_version_query_params)(endpoint1), {
233
233
  method: "POST",
234
234
  body: body
235
235
  });
236
+ if ("query_id" in request && request.type === "collection") // FIXME: Remove. Backwards compatibility layer
237
+ // This will retry the request without the collection type if the first request fails
238
+ {
239
+ if (!search_results || search_results?.status === 404) {
240
+ (0, $57o7A$depictaiutilishared.dlog)("Fallback request for collections due to failure");
241
+ const fallback_body = JSON.parse(body);
242
+ delete fallback_body.type;
243
+ search_results = await (0, $57o7A$depictaiutilishared.fetch_retry)((0, $57o7A$depictaiutilishared.add_version_query_params)(endpoint1), {
244
+ method: "POST",
245
+ body: JSON.stringify(fallback_body)
246
+ });
247
+ }
248
+ }
236
249
  if (!search_results || search_results.status !== 200) {
237
250
  const retval = fallback_response(input_req);
238
251
  resolve_in_progress(retval);
@@ -5306,7 +5319,7 @@ function $cafad5eca9f09cb5$export$d4fc5c0e68a52116(el, query_id_, i18n_) {
5306
5319
 
5307
5320
 
5308
5321
  const $840d88a04b2d22a7$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$57o7A$solidjsweb.template)(`<div class="product-count"><!#><!/> <!#><!/></div>`, 6), $840d88a04b2d22a7$var$_tmpl$2 = /*@__PURE__*/ (0, /*@__PURE__*/$57o7A$solidjsweb.template)(`<div></div>`, 2), $840d88a04b2d22a7$var$_tmpl$3 = /*@__PURE__*/ (0, /*@__PURE__*/$57o7A$solidjsweb.template)(`<div class="filter-results-for-one-row"><!#><!/><!#><!/></div>`, 6), $840d88a04b2d22a7$var$_tmpl$4 = /*@__PURE__*/ (0, /*@__PURE__*/$57o7A$solidjsweb.template)(`<div class="depict plp category"><div class="listing-page"><!#><!/><!#><!/><!#><!/><!#><!/><!#><!/><!#><!/></div><!#><!/><!#><!/></div>`, 20);
5309
- function $840d88a04b2d22a7$export$f7d2f673fc2f091d({ depict_api_: depict_api_ , query_id_: query_id_ , current_sorting_: current_sorting_ , min_products_to_fetch_: min_products_to_fetch_ , category_filters_open_: category_filters_open_ , category_sorting_open_: category_sorting_open_ , expanded_filters_: expanded_filters_ , selected_filters_: selected_filters_ , get_quicklinks_accessor_: get_quicklinks_accessor_ , i18n_: incoming_i18n , get_breadcrumb_accessor_: get_breadcrumb_accessor_ , expanded_hierarchical_filters_: expanded_hierarchical_filters_ , local_filter_cache_: local_filter_cache_ , tenant_: tenant_ , market_: market_ , router_: router_ , show_quicklinks_: show_quicklinks_ , category_title_: category_title_ , show_breadcrumbs_: show_breadcrumbs_ , layout_options_: layout_options_ , scroll_restoration_data_: scroll_restoration_data_ , product_card_template_: product_card_template_ , sideways_filter_clearing_flag_: sideways_filter_clearing_flag_ }) {
5322
+ function $840d88a04b2d22a7$export$f7d2f673fc2f091d({ depict_api_: depict_api_ , query_id_: query_id_ , listing_type_: listing_type_ , current_sorting_: current_sorting_ , min_products_to_fetch_: min_products_to_fetch_ , category_filters_open_: category_filters_open_ , category_sorting_open_: category_sorting_open_ , expanded_filters_: expanded_filters_ , selected_filters_: selected_filters_ , get_quicklinks_accessor_: get_quicklinks_accessor_ , i18n_: incoming_i18n , get_breadcrumb_accessor_: get_breadcrumb_accessor_ , expanded_hierarchical_filters_: expanded_hierarchical_filters_ , local_filter_cache_: local_filter_cache_ , tenant_: tenant_ , market_: market_ , router_: router_ , show_quicklinks_: show_quicklinks_ , category_title_: category_title_ , show_breadcrumbs_: show_breadcrumbs_ , layout_options_: layout_options_ , scroll_restoration_data_: scroll_restoration_data_ , product_card_template_: product_card_template_ , sideways_filter_clearing_flag_: sideways_filter_clearing_flag_ }) {
5310
5323
  let results_for;
5311
5324
  let only_show_filters_opener_;
5312
5325
  let middle_elements_;
@@ -5331,6 +5344,7 @@ function $840d88a04b2d22a7$export$f7d2f673fc2f091d({ depict_api_: depict_api_ ,
5331
5344
  tenant: tenant_(),
5332
5345
  market: market_(),
5333
5346
  query_id: query_id_(),
5347
+ type: listing_type_(),
5334
5348
  ...f.length ? {
5335
5349
  filters: f
5336
5350
  } : {},
@@ -5944,6 +5958,7 @@ class $48567ac5b39bac56$export$f34314aa9505732e {
5944
5958
  #merchant_signal = (0, $57o7A$solidjs.createSignal)();
5945
5959
  #market_signal = (0, $57o7A$solidjs.createSignal)();
5946
5960
  #query_id_signal = (0, $57o7A$solidjs.createSignal)("");
5961
+ #listing_type_signal = (0, $57o7A$solidjs.createSignal)();
5947
5962
  static #has_been_constructed = false;
5948
5963
  get localization() {
5949
5964
  // allow reactive access
@@ -5970,6 +5985,12 @@ class $48567ac5b39bac56$export$f34314aa9505732e {
5970
5985
  set market(market) {
5971
5986
  this.#market_signal[1](market);
5972
5987
  }
5988
+ get listing_type() {
5989
+ return this.#listing_type_signal[0]();
5990
+ }
5991
+ set listing_type(listing_type) {
5992
+ this.#listing_type_signal[1](listing_type);
5993
+ }
5973
5994
  get on_navigation() {
5974
5995
  // The only non-reactive public property on the class (I don't see it making sense to have it reactive)
5975
5996
  return this.#router.on_navigation_;
@@ -6032,6 +6053,7 @@ function $48567ac5b39bac56$export$e2bf8ce7779e827e({ depict_category: depict_cat
6032
6053
  min_products_to_fetch_: $48567ac5b39bac56$var$min_products_to_fetch_,
6033
6054
  local_filter_cache_: local_filter_cache_,
6034
6055
  query_id_: ()=>depict_category.category_id,
6056
+ listing_type_: ()=>depict_category.listing_type,
6035
6057
  i18n_: i18n_,
6036
6058
  show_quicklinks_: show_quicklinks,
6037
6059
  category_title_: category_title,
@@ -189,10 +189,23 @@ class $7fa23e2a0079eca4$export$e015ed2f2950f2e3 {
189
189
  let resolve_in_progress;
190
190
  cache_obj.in_progress_[body] = new Promise((r)=>resolve_in_progress = r);
191
191
  try {
192
- const search_results = await (0, $gco9i$fetch_retry)((0, $gco9i$add_version_query_params)(endpoint1), {
192
+ let search_results = await (0, $gco9i$fetch_retry)((0, $gco9i$add_version_query_params)(endpoint1), {
193
193
  method: "POST",
194
194
  body: body
195
195
  });
196
+ if ("query_id" in request && request.type === "collection") // FIXME: Remove. Backwards compatibility layer
197
+ // This will retry the request without the collection type if the first request fails
198
+ {
199
+ if (!search_results || search_results?.status === 404) {
200
+ (0, $gco9i$dlog)("Fallback request for collections due to failure");
201
+ const fallback_body = JSON.parse(body);
202
+ delete fallback_body.type;
203
+ search_results = await (0, $gco9i$fetch_retry)((0, $gco9i$add_version_query_params)(endpoint1), {
204
+ method: "POST",
205
+ body: JSON.stringify(fallback_body)
206
+ });
207
+ }
208
+ }
196
209
  if (!search_results || search_results.status !== 200) {
197
210
  const retval = fallback_response(input_req);
198
211
  resolve_in_progress(retval);
@@ -5266,7 +5279,7 @@ function $eb9ba2e49ab3dcc2$export$d4fc5c0e68a52116(el, query_id_, i18n_) {
5266
5279
 
5267
5280
 
5268
5281
  const $df5d81d0fe61ff21$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$gco9i$template)(`<div class="product-count"><!#><!/> <!#><!/></div>`, 6), $df5d81d0fe61ff21$var$_tmpl$2 = /*@__PURE__*/ (0, /*@__PURE__*/$gco9i$template)(`<div></div>`, 2), $df5d81d0fe61ff21$var$_tmpl$3 = /*@__PURE__*/ (0, /*@__PURE__*/$gco9i$template)(`<div class="filter-results-for-one-row"><!#><!/><!#><!/></div>`, 6), $df5d81d0fe61ff21$var$_tmpl$4 = /*@__PURE__*/ (0, /*@__PURE__*/$gco9i$template)(`<div class="depict plp category"><div class="listing-page"><!#><!/><!#><!/><!#><!/><!#><!/><!#><!/><!#><!/></div><!#><!/><!#><!/></div>`, 20);
5269
- function $df5d81d0fe61ff21$export$f7d2f673fc2f091d({ depict_api_: depict_api_ , query_id_: query_id_ , current_sorting_: current_sorting_ , min_products_to_fetch_: min_products_to_fetch_ , category_filters_open_: category_filters_open_ , category_sorting_open_: category_sorting_open_ , expanded_filters_: expanded_filters_ , selected_filters_: selected_filters_ , get_quicklinks_accessor_: get_quicklinks_accessor_ , i18n_: incoming_i18n , get_breadcrumb_accessor_: get_breadcrumb_accessor_ , expanded_hierarchical_filters_: expanded_hierarchical_filters_ , local_filter_cache_: local_filter_cache_ , tenant_: tenant_ , market_: market_ , router_: router_ , show_quicklinks_: show_quicklinks_ , category_title_: category_title_ , show_breadcrumbs_: show_breadcrumbs_ , layout_options_: layout_options_ , scroll_restoration_data_: scroll_restoration_data_ , product_card_template_: product_card_template_ , sideways_filter_clearing_flag_: sideways_filter_clearing_flag_ }) {
5282
+ function $df5d81d0fe61ff21$export$f7d2f673fc2f091d({ depict_api_: depict_api_ , query_id_: query_id_ , listing_type_: listing_type_ , current_sorting_: current_sorting_ , min_products_to_fetch_: min_products_to_fetch_ , category_filters_open_: category_filters_open_ , category_sorting_open_: category_sorting_open_ , expanded_filters_: expanded_filters_ , selected_filters_: selected_filters_ , get_quicklinks_accessor_: get_quicklinks_accessor_ , i18n_: incoming_i18n , get_breadcrumb_accessor_: get_breadcrumb_accessor_ , expanded_hierarchical_filters_: expanded_hierarchical_filters_ , local_filter_cache_: local_filter_cache_ , tenant_: tenant_ , market_: market_ , router_: router_ , show_quicklinks_: show_quicklinks_ , category_title_: category_title_ , show_breadcrumbs_: show_breadcrumbs_ , layout_options_: layout_options_ , scroll_restoration_data_: scroll_restoration_data_ , product_card_template_: product_card_template_ , sideways_filter_clearing_flag_: sideways_filter_clearing_flag_ }) {
5270
5283
  let results_for;
5271
5284
  let only_show_filters_opener_;
5272
5285
  let middle_elements_;
@@ -5291,6 +5304,7 @@ function $df5d81d0fe61ff21$export$f7d2f673fc2f091d({ depict_api_: depict_api_ ,
5291
5304
  tenant: tenant_(),
5292
5305
  market: market_(),
5293
5306
  query_id: query_id_(),
5307
+ type: listing_type_(),
5294
5308
  ...f.length ? {
5295
5309
  filters: f
5296
5310
  } : {},
@@ -5904,6 +5918,7 @@ class $961b5c64bef4662f$export$f34314aa9505732e {
5904
5918
  #merchant_signal = (0, $gco9i$createSignal)();
5905
5919
  #market_signal = (0, $gco9i$createSignal)();
5906
5920
  #query_id_signal = (0, $gco9i$createSignal)("");
5921
+ #listing_type_signal = (0, $gco9i$createSignal)();
5907
5922
  static #has_been_constructed = false;
5908
5923
  get localization() {
5909
5924
  // allow reactive access
@@ -5930,6 +5945,12 @@ class $961b5c64bef4662f$export$f34314aa9505732e {
5930
5945
  set market(market) {
5931
5946
  this.#market_signal[1](market);
5932
5947
  }
5948
+ get listing_type() {
5949
+ return this.#listing_type_signal[0]();
5950
+ }
5951
+ set listing_type(listing_type) {
5952
+ this.#listing_type_signal[1](listing_type);
5953
+ }
5933
5954
  get on_navigation() {
5934
5955
  // The only non-reactive public property on the class (I don't see it making sense to have it reactive)
5935
5956
  return this.#router.on_navigation_;
@@ -5992,6 +6013,7 @@ function $961b5c64bef4662f$export$e2bf8ce7779e827e({ depict_category: depict_cat
5992
6013
  min_products_to_fetch_: $961b5c64bef4662f$var$min_products_to_fetch_,
5993
6014
  local_filter_cache_: local_filter_cache_,
5994
6015
  query_id_: ()=>depict_category.category_id,
6016
+ listing_type_: ()=>depict_category.listing_type,
5995
6017
  i18n_: i18n_,
5996
6018
  show_quicklinks_: show_quicklinks,
5997
6019
  category_title_: category_title,
package/dist/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- import { JSX, Accessor, Setter, Signal } from "solid-js";
2
1
  import { Display, Elem, ColsAtSize, Node_Array } from "@depict-ai/utilishared";
2
+ import { JSX, Accessor, Setter, Signal } from "solid-js";
3
3
  import { SearchResponse } from "@depict-ai/types/api/SearchResponse";
4
4
  import { SearchRequest, SearchFilter } from "@depict-ai/types/api/SearchRequest";
5
5
  import { BaseSearchRequest } from "@depict-ai/types/api/BaseSearchRequest";
@@ -7,16 +7,11 @@ import { SearchSuggestionsResponse, CategorySuggestion } from "@depict-ai/types/
7
7
  import { SearchSuggestionsRequest } from "@depict-ai/types/api/SearchSuggestionsRequest";
8
8
  import { ProductListingRequest } from "@depict-ai/types/api/ProductListingRequest";
9
9
  import { ProductListingResponse } from "@depict-ai/types/api/ProductListingResponse";
10
- export const version = "1.0.18";
11
- export function CrossIcon(props?: JSX.SvgSVGAttributes<SVGSVGElement>): SVGElement;
12
- /** @jsxImportSource solid-js */
13
- export function GenericSliderArrowButton(props?: {
14
- width_?: number;
15
- height_?: number;
16
- }): SVGElement;
10
+ export const version = "1.1.0";
17
11
  export type OnNavigation = ((options: {
18
12
  is_replace: boolean;
19
13
  new_url: URL;
14
+ scroll: boolean;
20
15
  }) => void) | "hard_navigation";
21
16
  export type ExclusiveId = {
22
17
  categoryId: string;
@@ -220,27 +215,6 @@ declare class SDKError extends Error {
220
215
  export class ProductCardError extends SDKError {
221
216
  constructor(templateError: Error);
222
217
  }
223
- /**
224
- * Base placeholder component used by ImagePlaceholder and TextPlaceholder
225
- */
226
- export function BasePlaceholder(props: {
227
- style: JSX.CSSProperties;
228
- class?: string;
229
- }): JSX.Element;
230
- /**
231
- * 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.
232
- * If you want a block version, use `ImagePlaceholder` with `width`and `height` set instead.
233
- * @property height height of the placeholder. Set to `1em` by default.
234
- * @property width width of the placeholder. For specific number of characters use `ch`, ex: `width="7ch"`
235
- * @property class extra classes to add to the placeholder
236
- * @property style extra styles to add to the placeholder
237
- */
238
- export function TextPlaceholder(props: {
239
- style?: JSX.CSSProperties;
240
- height: string;
241
- width: string;
242
- class?: string;
243
- }): JSX.Element;
244
218
  /**
245
219
  * Disables scrolling until the solidjs reactive scoped is disposed (onCleanup)
246
220
  * @returns A cleanup function to manually re-enable scrolling.
@@ -249,7 +223,7 @@ export function disable_scrolling(): () => void;
249
223
  export const CategoryTitle: ({ category_title_, product_count_, }: {
250
224
  category_title_: Accessor<string | undefined>;
251
225
  product_count_: JSX.Element;
252
- }) => JSX.Element;
226
+ }) => HTMLElement;
253
227
  /**
254
228
  * 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.
255
229
  * 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
@@ -278,6 +252,112 @@ export type SDKColsAtSize = [number, number?][];
278
252
  * @returns
279
253
  */
280
254
  export const convert_sdk_cols_at_size_to_layout: (cols_at_size: SDKColsAtSize) => ColsAtSize;
255
+ export type BaseProviderConfig = {
256
+ /**
257
+ * The merchant to use for the search.
258
+ * @example "YOUR_MERCHANT", "stronger"
259
+ */
260
+ merchant: string;
261
+ /**
262
+ * The market to use for the search.
263
+ * @example "YOUR_MARKET", "no", "en-de"
264
+ */
265
+ market: string;
266
+ /**
267
+ * Optional unique identifier of a logged in user. Should be persistent across devices and sessions.
268
+ */
269
+ userId?: string;
270
+ /**
271
+ * Optional unique identifer of the current session. Only necessary when performing server side requests to Depict.
272
+ */
273
+ sessionId?: string;
274
+ /**
275
+ * Custom metadata to be sent with each request to the Depict API. Only necessary if specifically instructed by Depict.
276
+ */
277
+ metaData?: Record<string, string>;
278
+ };
279
+ export type BaseSearchProviderConfig = {
280
+ /**
281
+ * The path to the search page.
282
+ * @example "/search", "/sok"
283
+ */
284
+ searchPagePath: string;
285
+ /**
286
+ * The name of the url parameter that will be used for the search query.
287
+ * @example "q", "search_query", "query"
288
+ * @default "query"
289
+ */
290
+ urlParamName?: string;
291
+ /**
292
+ * Whether to enable category suggestions in the search modal and search page.
293
+ * @default false
294
+ */
295
+ enableCategorySuggestions?: boolean;
296
+ };
297
+ export interface BaseProductListingConfig {
298
+ /**
299
+ * How many columns to show at each media size.
300
+ * @default
301
+ * [[2, 901], [3, 1024], [4]]
302
+ * @example
303
+ * [[2, 901], [3, 1024], [4]]
304
+ * means 2 columns at sizes up to 901px, 3 columns at sizes up to 1024px and after that 4 columns at any viewport size.
305
+ */
306
+ columnsAtSize?: SDKColsAtSize;
307
+ /**
308
+ * The spacing between products.
309
+ * @default "2%"
310
+ * @example
311
+ * "2%", "10px", "1rem", {horizontal: "1%", vertical: "5px"}
312
+ */
313
+ gridSpacing?: SDKGridSpacing;
314
+ }
315
+ export interface BaseSearchPageConfig extends BaseProductListingConfig {
316
+ /**
317
+ * Whether to show the search input field in the search page.
318
+ * @default true
319
+ */
320
+ includeInputField?: boolean;
321
+ }
322
+ export interface BaseCategoryPageConfig extends BaseProductListingConfig {
323
+ /**
324
+ * Whether to show the breadcrumbs in the category page.
325
+ * @default true
326
+ */
327
+ showBreadcrumbs?: boolean;
328
+ /**
329
+ * Whether to show the quicklinks in the category page.
330
+ * @default true
331
+ */
332
+ showQuicklinks?: boolean;
333
+ }
334
+ /**
335
+ * Props for the TextPlaceholder component.
336
+ */
337
+ export interface TextPlaceholderProps {
338
+ /**
339
+ * The height of the text, including a unit.
340
+ * @example "1em"
341
+ */
342
+ height: string;
343
+ /**
344
+ * The width of the text.
345
+ * @example "60px", "10em"
346
+ */
347
+ width: string;
348
+ }
349
+ /**
350
+ * Props for the ImagePlaceholder component.
351
+ */
352
+ export interface ImagePlaceholderProps {
353
+ /** The aspect ratio of the image that will be displayed. */
354
+ aspectRatio: number;
355
+ }
356
+ /**
357
+ * Will be sent to backend to indicate whether the query_id_ is for a collection or category.
358
+ * Backend defaults to category if not specified.
359
+ */
360
+ type ListingType = "collection" | "category";
281
361
  type DepictCategoryConstructorOptions = {
282
362
  market: string;
283
363
  merchant: string;
@@ -295,6 +375,8 @@ export class DepictCategory {
295
375
  set merchant(merchant: string);
296
376
  get market(): string;
297
377
  set market(market: string);
378
+ get listing_type(): ListingType | undefined;
379
+ set listing_type(listing_type: ListingType | undefined);
298
380
  get on_navigation(): OnNavigation;
299
381
  set on_navigation(new_function: OnNavigation);
300
382
  constructor({ api, on_navigation, ...props_on_class }: DepictCategoryConstructorOptions);
@@ -314,34 +396,7 @@ export function BreadCrumbs({ depict_category }: {
314
396
  export function QuickLinks({ depict_category }: {
315
397
  depict_category: DepictCategory;
316
398
  }): HTMLElement;
317
- /**
318
- * Gets available categories/collections (query_ids for the product-listing endpoint) for a merchant
319
- * @param tenant
320
- * @param market
321
- * @param type - optional, currently only setting this to "collection" will return collections instead of categories
322
- */
323
- export function get_categories(tenant: string, market: string, type?: string): Promise<string[]>;
324
- type ImagePlaceholderBaseOptions = {
325
- style?: JSX.CSSProperties;
326
- class?: string;
327
- };
328
- type ImagePlaceholderBlockOptions = {
329
- width: string;
330
- height: string;
331
- };
332
- type ImagePlaceholderImageOptions = {
333
- aspectRatio: number;
334
- };
335
- /**
336
- * A placeholder that can be used instead of an image or other block of content while it's loading.
337
- * The placeholder has `display:block`, meaning it will create a new "row" in the layout for itself. Can be used either for images with a defined aspect ratio (ContainedImage) or blocks.
338
- * @property aspectRatio if aspectRatio is defined the placeholder will be in "image mode" and fill out the available width and then adjust the height according to the aspectRatio
339
- * @property width If width and height is set, the defined width and height will be used.
340
- * @property height If width and height is set, the defined width and height will be used.
341
- * @property class extra classes to add to the placeholder
342
- * @property style extra styles to add to the placeholder
343
- */
344
- export function ImagePlaceholder(props: ImagePlaceholderBaseOptions & (ImagePlaceholderBlockOptions | ImagePlaceholderImageOptions)): JSX.Element;
399
+ export function get_categories(tenant: string, market: string): Promise<string[]>;
345
400
  export function DefaultInstantCardPlaceholder(): HTMLDivElement;
346
401
  /**
347
402
  * Useful for aligning the search modal to an element, like an existing input field
@@ -406,7 +461,7 @@ export class DepictSearch<T extends Display> {
406
461
  set market(market: string);
407
462
  fetchSearchResults(query: string, filters?: SearchFilter[], maxResults?: number): Promise<T[]>;
408
463
  }
409
- export function SearchPage<T extends Display>({ depict_search, include_input_field, grid_spacing, cols_at_size, product_card_template, extra_depict_options, }: {
464
+ export function SearchPage<T extends Display>(props: {
410
465
  depict_search: DepictSearch<T>;
411
466
  include_input_field?: boolean | {
412
467
  on_open_?: VoidFunction;
@@ -426,85 +481,6 @@ interface SearchFieldParams {
426
481
  aligner_ref?: HTMLElement | null;
427
482
  }
428
483
  export function SearchField({ depict_search, modal_dispose_handler, click_handler, aligner_ref, }: SearchFieldParams): import("@depict-ai/utilishared").Node_Array;
429
- export type BaseProviderConfig = {
430
- /**
431
- * The merchant to use for the search.
432
- * @example "YOUR_MERCHANT", "stronger"
433
- */
434
- merchant: string;
435
- /**
436
- * The market to use for the search.
437
- * @example "YOUR_MARKET", "no", "en-de"
438
- */
439
- market: string;
440
- /**
441
- * Optional unique identifier of a logged in user. Should be persistent across devices and sessions.
442
- */
443
- userId?: string;
444
- /**
445
- * Optional unique identifer of the current session. Only necessary when performing server side requests to Depict.
446
- */
447
- sessionId?: string;
448
- /**
449
- * Custom metadata to be sent with each request to the Depict API. Only necessary if specifically instructed by Depict.
450
- */
451
- metaData?: Record<string, string>;
452
- };
453
- export type BaseSearchProviderConfig = {
454
- /**
455
- * The path to the search page.
456
- * @example "/search", "/sok"
457
- */
458
- searchPagePath: string;
459
- /**
460
- * The name of the url parameter that will be used for the search query.
461
- * @example "q", "search_query", "query"
462
- * @default "query"
463
- */
464
- urlParamName?: string;
465
- /**
466
- * Whether to enable category suggestions in the search modal and search page.
467
- * @default false
468
- */
469
- enableCategorySuggestions?: boolean;
470
- };
471
- export interface BaseProductListingConfig {
472
- /**
473
- * How many columns to show at each media size.
474
- * @default
475
- * [[2, 901], [3, 1024], [4]]
476
- * @example
477
- * [[2, 901], [3, 1024], [4]]
478
- * means 2 columns at sizes up to 901px, 3 columns at sizes up to 1024px and after that 4 columns at any viewport size.
479
- */
480
- columnsAtSize?: SDKColsAtSize;
481
- /**
482
- * The spacing between products.
483
- * @default "2%"
484
- * @example
485
- * "2%", "10px", "1rem", {horizontal: "1%", vertical: "5px"}
486
- */
487
- gridSpacing?: SDKGridSpacing;
488
- }
489
- export interface BaseSearchPageConfig extends BaseProductListingConfig {
490
- /**
491
- * Whether to show the search input field in the search page.
492
- * @default true
493
- */
494
- includeInputField?: boolean;
495
- }
496
- export interface BaseCategoryPageConfig extends BaseProductListingConfig {
497
- /**
498
- * Whether to show the breadcrumbs in the category page.
499
- * @default true
500
- */
501
- showBreadcrumbs?: boolean;
502
- /**
503
- * Whether to show the quicklinks in the category page.
504
- * @default true
505
- */
506
- showQuicklinks?: boolean;
507
- }
508
484
  type CenteredLocation = {
509
485
  location?: "centered";
510
486
  };
@@ -570,5 +546,5 @@ export const defaultGridSpacing = "2%";
570
546
  export const defaultCategoryTitlePlugin: ({ category_title_, product_count_, }: {
571
547
  category_title_: import("solid-js").Accessor<string | undefined>;
572
548
  product_count_: import("solid-js").JSX.Element;
573
- }) => import("solid-js").JSX.Element;
549
+ }) => HTMLElement;
574
550
  export type { SearchFilter } from "@depict-ai/types/api/SearchRequest";