@depict-ai/ui 3.0.6 → 3.0.8

package/latest/index.cjs

@@ -77,7 +77,7 @@ $parcel$export(module.exports, "defaultColsAtSize", () => $a3280f0aad997933$expo
 $parcel$export(module.exports, "defaultCategoryTitlePlugin", () => $a3280f0aad997933$export$7bf543b9d9be2c22);
 $parcel$export(module.exports, "version", () => $b757f75811f3261f$export$83d89fbfd8236492);
 /*! Depict.ai search and product listing SDK */
-const $b757f75811f3261f$export$83d89fbfd8236492 = "3.0.6";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "3.0.8";
 const $0f313083912e447a$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 14 26"><path d="M2 24.656c-.078 0-.156-.016-.234-.047s-.133-.066-.187-.129c-.117-.117-.176-.258-.176-.422s.059-.305.176-.422l10.371-10.371L1.578 2.883c-.117-.117-.176-.258-.176-.422s.059-.305.176-.422.258-.176.422-.176.305.059.422.176l10.805 10.793a.59.59 0 0 1 .176.434c0 .172-.059.305-.176.422L2.422 24.48a.42.42 0 0 1-.199.129.54.54 0 0 1-.223.047zm0 0"fill=#0f0f0f>`);
 function $0f313083912e447a$export$8be2714ec7f169ee(props = {}) {
   return (() => {
@@ -5501,6 +5501,65 @@ function $67dc366d96177e70$export$967e966fca9515e(api_response) {
 // Why not use const enum? See https://gitlab.com/depict-ai/depict.ai/-/merge_requests/9223#note_1675965260
 const $779741d0f266ea8c$export$74ee7529ce0f8a00 = "listingId";
 const $779741d0f266ea8c$export$5aae649db1b959fc = "externalId";
+
+/**
+ * Converts a v3 API response into something that has quick_links and breadcrumbs that behave as in v2 instead of ancestors, children and siblings, but gives every quicklink and breadcrumb's transformer the ancestors of the listing they are for.
+ */
+async function $3a9f9f260c9bfc55$export$d9792230b7c0203e({
+  input_data_: {
+    ancestors: ancestors,
+    children: children,
+    siblings: siblings,
+    ...clonedInputData
+  },
+  category_transformer_ = v => v.data,
+  merchant_:
+  // in case no display transformer just pass the data through, so we don't break
+  merchant_,
+  market_: market_,
+  locale_: locale_
+}) {
+  const breadcrumbs = [];
+  const clonedAncestors = [...ancestors];
+  while (clonedAncestors.length) {
+    const ancestor = clonedAncestors.pop();
+    if (!ancestor.show_in_breadcrumbs) continue;
+    breadcrumbs.push({
+      ...ancestor,
+      ancestors: [...clonedAncestors]
+    });
+  }
+  breadcrumbs.reverse();
+  const quicklinksIsChildren = children.length;
+  const quickLinks = (quicklinksIsChildren ? children : siblings).filter(({
+    show_in_quicklinks: show_in_quicklinks
+  }) => show_in_quicklinks).map(productListing => {
+    const ancestorsForUs = [...ancestors];
+    if (quicklinksIsChildren) ancestorsForUs.push({
+      ...clonedInputData
+    });
+    return {
+      ...productListing,
+      ancestors: ancestorsForUs
+    };
+  });
+  const [transformedBreadcrumbs, transformedQuickLinks] = await Promise.all([category_transformer_({
+    merchant: merchant_,
+    market: market_,
+    locale: locale_,
+    data: breadcrumbs
+  }), category_transformer_({
+    merchant: merchant_,
+    market: market_,
+    locale: locale_,
+    data: quickLinks
+  })]);
+  return {
+    ...clonedInputData,
+    breadcrumbs: transformedBreadcrumbs,
+    quick_links: transformedQuickLinks
+  };
+}
 const $e1d6c0f3d89d531c$var$v3_base_url = (0, $gVhhF$depictaiutilishared.base_url) + "/v3/";
 const $e1d6c0f3d89d531c$var$search_base_url = $e1d6c0f3d89d531c$var$v3_base_url + "search/";
 class $e1d6c0f3d89d531c$export$e015ed2f2950f2e3 {
@@ -5526,20 +5585,32 @@ class $e1d6c0f3d89d531c$export$e015ed2f2950f2e3 {
   };
   #get_metadata;
   #get_session_id;
-  async #run_url_creator_for_suggest(merchant, market, response) {
+  async #run_url_creator_for_suggest(merchant, market, locale, response) {
     const category_transformer = this.display_transformers?.categories;
     if (!category_transformer) return response;
+    const incoming_suggestions = response.suggestions;
+    const type_to_transform = "listing";
     // find category suggestions, run thing with them, and then replace them
-    const category_suggestions = response.suggestions.filter(suggestion => suggestion.type === "listing");
-    const transformed_category_suggestions = await category_transformer({
+    const category_suggestions = incoming_suggestions.filter(suggestion => suggestion.type === type_to_transform);
+    const transformed_suggestions = [...(await category_transformer({
       market: market,
       merchant: merchant,
+      locale: locale,
       data: [...category_suggestions]
-    });
-    response.suggestions = transformed_category_suggestions;
+    }))];
+    // Then add-back query suggestions at their original indices
+    for (let i = 0; i < incoming_suggestions.length; i++) {
+      const item = incoming_suggestions[i];
+      if (item.type === type_to_transform) continue;
+      transformed_suggestions.splice(i, 0, item);
+    }
+    response.suggestions = transformed_suggestions;
     return response;
   }
-  async #run_display_transformers_for_rest(merchant, market, input_data) {
+  /**
+  * rest = everything except query suggestions
+  */
+  async #run_display_transformers_for_rest(merchant, market, locale, input_data) {
     const {
       display_transformers: display_transformers
     } = this;
@@ -5555,25 +5626,24 @@ class $e1d6c0f3d89d531c$export$e015ed2f2950f2e3 {
       const transformed_displays = await product_transformer({
         merchant: merchant,
         market: market,
+        locale: locale,
         displays: [...displays]
       });
       input_data.displays = transformed_displays;
     }
-    if (category_transformer) for (const key of ["breadcrumbs", "quick_links"]) {
-      const category_display_array = input_data[key];
-      if (!category_display_array) continue;
-      const transformed_category_displays = await category_transformer({
-        merchant: merchant,
-        market: market,
-        data: [...category_display_array]
-      });
-      input_data[key] = transformed_category_displays;
-    }
     if (content_search_links?.length && content_result_transformer) input_data.content_search_links = await content_result_transformer({
       merchant: merchant,
       market: market,
+      locale: locale,
       data: [...content_search_links]
     });
+    if (input_data.ancestors) return await $3a9f9f260c9bfc55$export$d9792230b7c0203e({
+      input_data_: input_data,
+      category_transformer_: category_transformer,
+      merchant_: merchant,
+      market_: market,
+      locale_: locale
+    });
     return input_data;
   }
   async #cached_request({
@@ -5610,7 +5680,7 @@ class $e1d6c0f3d89d531c$export$e015ed2f2950f2e3 {
         let result;
         try {
           const unmodified_result = await api_response.json();
-          result = await this.#run_display_transformers_for_rest(input_req_.merchant, input_req_.market, unmodified_result);
+          result = await this.#run_display_transformers_for_rest(input_req_.merchant, input_req_.market, input_req_.locale, unmodified_result);
         } catch (e) {
           $gVhhF$depictaiutilishared.dwarn("displayTransformer or json decoding failed", e);
           break return_successfully;
@@ -5660,7 +5730,7 @@ class $e1d6c0f3d89d531c$export$e015ed2f2950f2e3 {
       const decoded_json = await results.json();
       if (!Array.isArray(decoded_json?.suggestions)) break attempt_to_return_api_response;
       try {
-        return await this.#run_url_creator_for_suggest(input_req.merchant, input_req.market, decoded_json);
+        return await this.#run_url_creator_for_suggest(input_req.merchant, input_req.market, input_req.locale, decoded_json);
       } catch (e) {
         $gVhhF$depictaiutilishared.dwarn("displayTransformer failed", e);
       }
@@ -5696,13 +5766,12 @@ class $e1d6c0f3d89d531c$export$e015ed2f2950f2e3 {
       fallback_response_: () => ({
         listing_id: "",
         listing_type: "category",
-        "title": "",
-        "description": "string",
-        "replace_meta_tags": true,
-        "slug": "",
-        "updated_at": new Date().toISOString(),
-        "breadcrumbs": [],
-        "quick_links": [],
+        title: "",
+        slug: "",
+        show_in_breadcrumbs: false,
+        show_in_quicklinks: false,
+        breadcrumbs: [],
+        quick_links: [],
         failed: true
       }),
       method_: "GET"
@@ -8299,7 +8368,7 @@ function $840d88a04b2d22a7$export$f7d2f673fc2f091d({
   })));
   const available_filters_ = $gVhhF$solidjs.createMemo(() => plp_products_()?.filters);
   const title = $gVhhF$solidjs.createMemo(() => plp_meta()?.title);
-  const crumb_data_ = $840d88a04b2d22a7$var$add_us_to_crumbs(plp_meta, title);
+  const crumb_data_ = $840d88a04b2d22a7$var$add_us_to_crumbs(plp_meta);
   const quicklinks_data_ = $gVhhF$solidjs.createMemo(() => plp_meta()?.quick_links);
   const [sort_or_filter_open_, set_sort_or_filter_open_] = $gVhhF$solidjs.createSignal(false);
   const [desktop_filter_elements_, set_desktop_filter_elements] = $gVhhF$solidjs.createSignal();
@@ -8577,31 +8646,16 @@ function $840d88a04b2d22a7$export$f7d2f673fc2f091d({
 /**
  * Adds the current page as last breadcrumb to the breadcrumb trail
  */
-function $840d88a04b2d22a7$var$add_us_to_crumbs(plp_meta, title) {
+function $840d88a04b2d22a7$var$add_us_to_crumbs(plp_meta) {
   const href_accessor = $gVhhF$depictaiutilisharedlatest.use_href_accessor();
   return $gVhhF$solidjs.createMemo(() => {
     const api_value = plp_meta()?.breadcrumbs;
     if (!api_value) return api_value;
-    return [...api_value, {
-      get listing_id() {
-        return plp_meta().listing_id;
-      },
-      get title() {
-        return title();
-      },
+    return [...api_value, $gVhhF$solidjs.mergeProps(plp_meta(), {
       get page_url() {
         return href_accessor();
-      },
-      get slug() {
-        return plp_meta().slug;
-      },
-      get listing_type() {
-        return plp_meta().listing_type;
-      },
-      get external_id() {
-        return plp_meta().external_id;
       }
-    }];
+    })];
   });
 }
 function $c79fd10a3ab7d6e0$export$477caf01aecaeb2a(options) {
@@ -9208,7 +9262,7 @@ function $dae23104ba8bb78c$export$d757d54550ebfb3d({
   category_suggestion_: category_suggestion_,
   router_: router_
 }) {
-  const parentTitle = $gVhhF$solidjs.createMemo(() => category_suggestion_().breadcrumbs.at(-1)?.title);
+  const parentTitle = $gVhhF$solidjs.createMemo(() => category_suggestion_().ancestors.at(-1)?.title);
   return (() => {
     const _el$ = $gVhhF$solidjsweb.getNextElement($dae23104ba8bb78c$var$_tmpl$2),
       _el$2 = _el$.firstChild,
@@ -9906,7 +9960,7 @@ function $9a268bf73b31a717$export$a146ac6fa8346a25({
   currently_showing_suggestions_[1](value => {
     value[0] = $gVhhF$solidjs.createMemo(() => previous_searches_().map(result => ({
       type: (0, $3ec9e21d6b6debdd$export$3cf9497e790da491),
-      title: result,
+      query: result,
       suggestions_result_id: "history"
     })));
     return value;
@@ -10026,10 +10080,7 @@ function $6b65ba8af12c5a26$export$e872e2339fb04a7f({
   submit_query_: submit_query_,
   get_content_results_: get_content_results_
 }) {
-  const queries_memo = $gVhhF$solidjs.createMemo(() => suggestion_memo_().filter(({
-    type: type,
-    title: title
-  }) => type === (0, $3ec9e21d6b6debdd$export$3cf9497e790da491) && !filtered_previous_searches_().includes(title) // don't show the ones we already show from the history
+  const queries_memo = $gVhhF$solidjs.createMemo(() => suggestion_memo_().filter(suggestion => suggestion.type === (0, $3ec9e21d6b6debdd$export$3cf9497e790da491) && !filtered_previous_searches_().includes(suggestion.query) // don't show the ones we already show from the history
   ) // + limit to three query suggestions, API sends more sometimes
   .slice(0, 3));
   const not_queries_memo = $gVhhF$solidjs.createMemo(() => {
@@ -10045,15 +10096,15 @@ function $6b65ba8af12c5a26$export$e872e2339fb04a7f({
     const is_query = $gVhhF$solidjs.createMemo(() => input_obj().type === (0, $3ec9e21d6b6debdd$export$3cf9497e790da491));
     const href_with_changed_params_accessor = $gVhhF$solidjs.createMemo(() => is_query() ? $496cde876b53ce1e$export$91c3b6774e8be0f5({
       param_: search_query_url_param_name_,
-      value_: $gVhhF$solidjs.createMemo(() => input_obj().title),
+      value_: $gVhhF$solidjs.createMemo(() => input_obj().query),
       url_transformer_: url_transformer_
     }) : undefined);
     const href = $gVhhF$solidjs.createMemo(() => is_query() ? href_with_changed_params_accessor()() : input_obj().page_url);
     const is_selected = $gVhhF$solidjs.createMemo(() => read_selected_index_()?.[0] === autocomplete_data_index && read_selected_index_()?.[1] === index);
     const parent_title_if_exists = $gVhhF$solidjs.createMemo(() => {
       const item = input_obj();
-      if (!("breadcrumbs" in item)) return;
-      return item.breadcrumbs.at(-1)?.title;
+      if (!("ancestors" in item)) return;
+      return item.ancestors.at(-1)?.title;
     });
     return (() => {
       const _el$ = $gVhhF$solidjsweb.getNextElement($6b65ba8af12c5a26$var$_tmpl$);
@@ -10063,8 +10114,9 @@ function $6b65ba8af12c5a26$export$e872e2339fb04a7f({
           if (ev.button || ev.metaKey || ev.ctrlKey)
             // not button 0 or cmd/ctrl click
             return;
+          const input = input_obj();
           ev.preventDefault();
-          submit_query_(input_obj().title);
+          submit_query_(is_query() ? input.query : input.title);
           return;
         }
         router_.navigate_.go_to_({
@@ -10092,7 +10144,7 @@ function $6b65ba8af12c5a26$export$e872e2339fb04a7f({
         }), $gVhhF$solidjsweb.createComponent((0, $d023ed916c84e75d$export$ba17c5b7e6dda39f), {
           class_: "value line-clamp",
           get whole_text_to_display_() {
-            return $gVhhF$solidjs.createMemo(() => input_obj().title);
+            return $gVhhF$solidjs.createMemo(() => input_obj().query);
           },
           searching_for_value_: searching_for_value_
         })] : [$gVhhF$solidjsweb.memo((() => {
@@ -10220,7 +10272,7 @@ function $6b65ba8af12c5a26$export$e872e2339fb04a7f({
               return (() => {
                 const mapped_history_results = $gVhhF$solidjs.createMemo(() => filtered_previous_searches_().map(result => ({
                   type: (0, $3ec9e21d6b6debdd$export$3cf9497e790da491),
-                  title: result,
+                  query: result,
                   suggestions_result_id: "history" // worthless to fix typing
                 })));
 
@@ -10391,16 +10443,16 @@ function $6a374b16bfe947d0$var$actual_navigation_working_on_fake_data({
     // update text field value if needed
     if (selected_entry?.type == "query") {
       const {
-        title: title
+        query: query
       } = selected_entry;
       $gVhhF$solidjs.runWithOwner(owner, block_updating_for_one_change);
-      set_search_field_value(title);
+      set_search_field_value(query);
       $gVhhF$solidjs.runWithOwner(owner, () => override_on_enter_for_this_entry(e => {
         // Open search query in new tab on cmd+enter
         // If it's not cmd+enter, pressing enter will just submit the value that was put into the field while selecting with the arrow keys ;)
         const url = new URL(location);
         url_transformer_?.(url);
-        url.searchParams.set(search_query_param_name_, title);
+        url.searchParams.set(search_query_param_name_, query);
         return $b8700779b3e745de$export$1efe1013da60d0e4(e, url.href);
       }));
     } else if (selected_entry?.type == "listing" || selected_entry?.type === "content") $gVhhF$solidjs.runWithOwner(owner, () => override_on_enter_for_this_entry(e => {

package/latest/index.d.ts

@@ -2,7 +2,7 @@ import { ColsAtSize, Display, ModernDisplay, Amazing_Slider, Node_Array, report,
 import { JSX, Signal, Accessor, Setter } from "solid-js";
 import { SearchFilter, SortModel, SearchRequestV3 } from "@depict-ai/types/api/SearchRequestV3";
 import { ContentLink, SearchFilter as _SearchFilter1, SearchResponse } from "@depict-ai/types/api/SearchResponse";
-import { ListingSuggestion, SearchSuggestionsResponseV3 } from "@depict-ai/types/api/SearchSuggestionsResponseV3";
+import { Ancestors, ListingSuggestion, SearchSuggestionsResponseV3 } from "@depict-ai/types/api/SearchSuggestionsResponseV3";
 import { ProductListing, GetListingResponse } from "@depict-ai/types/api/GetListingResponse";
 import { ProductListingResponseV3 } from "@depict-ai/types/api/ProductListingResponseV3";
 import { SearchSuggestionsRequestV3 } from "@depict-ai/types/api/SearchSuggestionsRequestV3";
@@ -10,7 +10,7 @@ import { ProductListingRequestV3 } from "@depict-ai/types/api/ProductListingRequ
 import { GetListingRequest } from "@depict-ai/types/api/GetListingRequest";
 import { BaseSearchRequestV3 } from "@depict-ai/types/api/BaseSearchRequestV3";
 import { SearchFilter as _SearchFilter2 } from "@depict-ai/types/api/SearchRequestV2";
-export const version = "3.0.6";
+export const version = "3.0.8";
 export type SDKColsAtSize = [number, number?][];
 /**
  * Transform SDK ColsAtSize into valid Layout ColsAtSize
@@ -40,11 +40,15 @@ type AddActualFieldToFilters<T extends SearchFilter[] | undefined> = T extends u
 type DisplayTransformerAlwaysThereData = {
   merchant: string;
   market: string;
+  locale: string;
 };
 type CanBePromiseWrapped<T> = T | Promise<T>;
 export type ModernDisplayWithPageUrl<T extends ModernDisplay> = { [K in keyof T]: K extends "variant_displays" ? (T[K][number] & {
   page_url: string;
 })[] : T[K] };
+type ProductListingWithAncestors = ProductListing & {
+  ancestors: Ancestors;
+};
 /**
  * DisplayTransformers supersede pageURLCreator
  * DisplayTransformers are functions that take in a list of categories, content search results or products and then can transform or enrich the data for each category, content search result or product card in a batched way.
@@ -53,7 +57,7 @@ export type DisplayTransformers<InputDisplay extends ModernDisplay, OutputDispla
   products?: (options: DisplayTransformerAlwaysThereData & {
     displays: InputDisplay[];
   }) => CanBePromiseWrapped<OutputDisplay extends ModernDisplay ? ModernDisplayWithPageUrl<OutputDisplay>[] : never>;
-  categories?: <T extends ProductListing | ListingSuggestion>(options: DisplayTransformerAlwaysThereData & {
+  categories?: <T extends ProductListingWithAncestors | ListingSuggestion>(options: DisplayTransformerAlwaysThereData & {
     data: T[];
   }) => CanBePromiseWrapped<(T & {
     page_url: string;
@@ -825,7 +829,11 @@ type _AddPageUrlToDisplay1<T extends any[]> = (T[number] & {
   page_url: string;
 })[];
 type ProductListingResponseAfterDisplayTransformer = { [K in keyof ProductListingResponseV3]: K extends "displays" ? _AddPageUrlToDisplay1<ProductListingResponseV3[K]> : K extends "filters" ? AddActualFieldToFilters<ProductListingResponseV3[K]> : ProductListingResponseV3[K] };
-type GetListingResponseAfterDisplayTransformer = { [K in keyof GetListingResponse]: K extends "breadcrumbs" ? ProductListingWithPageURL[] : K extends "quick_links" ? ProductListingWithPageURL[] : GetListingResponse[K] };
+type GetListingResponseAfterDisplayTransformer = { [K in keyof GetListingResponseWithQuicklinksAndBreadcrumbs]: K extends "breadcrumbs" ? ProductListingWithPageURL[] : K extends "quick_links" ? ProductListingWithPageURL[] : GetListingResponseWithQuicklinksAndBreadcrumbs[K] };
+type GetListingResponseWithQuicklinksAndBreadcrumbs = Omit<GetListingResponse, "siblings" | "ancestors" | "children"> & {
+  quick_links: ProductListingWithAncestors[];
+  breadcrumbs: ProductListingWithAncestors[];
+};
 type DepictAPIConstructorOptions<InputDisplay extends Display, OutputDisplay extends ModernDisplay | never> = {
   get_metadata?: () => Promise<{
     [k: string]: string;
@@ -957,7 +965,7 @@ export function CategoryPage<OriginalDisplay extends Display, OutputDisplay exte
   category_title: typeof CategoryTitle | typeof embedded_num_products;
   on_listing_query_change?: (new_listing_query?: ListingQuery | undefined, old_listing_query?: ListingQuery | undefined) => void;
   content_blocks_by_row?: ContentBlocksByRow;
-}): import("@depict-ai/utilishared/latest").Node_Array;
+}): import("@depict-ai/utilishared").Node_Array;
 export function BreadCrumbs<T extends Display>({
   depict_category
 }: {
@@ -1109,7 +1117,7 @@ type OpenModalParams<OriginalDisplay extends Display, OutputDisplay extends Mode
  * Open the modal with support for alignment.
  * @returns {void}
  */
-export const open_modal_with_alignment: <OriginalDisplay extends Display, OutputDisplay extends ModernDisplay>(openModalParams: OpenModalParams<OriginalDisplay, OutputDisplay>) => void;
+export const open_modal_with_alignment: <OriginalDisplay extends Display, OutputDisplay extends unknown>(openModalParams: OpenModalParams<OriginalDisplay, OutputDisplay>) => void;
 export function open_search_with_shift_slash(open_search: VoidFunction): () => void;
 export interface PageReplacer {
   readonly render_: () => Node_Array;