@depict-ai/ui 3.0.6 → 3.0.8

package/latest/index.js

@@ -7,7 +7,7 @@ import { createStore as $9HbP8$createStore, reconcile as $9HbP8$reconcile } from
 /*! Depict.ai search and product listing SDK */
 import { register_es_version } from "../multi_import_deduplicator.mjs";
 register_es_version("ui", "latest");
-const $ec291e0010116877$export$83d89fbfd8236492 = "3.0.6";
+const $ec291e0010116877$export$83d89fbfd8236492 = "3.0.8";
 const $fbbadcb080ad1d4a$var$_tmpl$ = /*#__PURE__*/$9HbP8$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 $fbbadcb080ad1d4a$export$8be2714ec7f169ee(props = {}) {
   return (() => {
@@ -5431,6 +5431,65 @@ function $e5014ccd0b76d9f4$export$967e966fca9515e(api_response) {
 // Why not use const enum? See https://gitlab.com/depict-ai/depict.ai/-/merge_requests/9223#note_1675965260
 const $c20599a0d81d953a$export$74ee7529ce0f8a00 = "listingId";
 const $c20599a0d81d953a$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 $23f4eb8487f328d9$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 $7fa23e2a0079eca4$var$v3_base_url = (0, $9HbP8$base_url) + "/v3/";
 const $7fa23e2a0079eca4$var$search_base_url = $7fa23e2a0079eca4$var$v3_base_url + "search/";
 class $7fa23e2a0079eca4$export$e015ed2f2950f2e3 {
@@ -5456,20 +5515,32 @@ class $7fa23e2a0079eca4$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;
@@ -5485,25 +5556,24 @@ class $7fa23e2a0079eca4$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 $23f4eb8487f328d9$export$d9792230b7c0203e({
+      input_data_: input_data,
+      category_transformer_: category_transformer,
+      merchant_: merchant,
+      market_: market,
+      locale_: locale
+    });
     return input_data;
   }
   async #cached_request({
@@ -5540,7 +5610,7 @@ class $7fa23e2a0079eca4$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) {
           $9HbP8$dwarn("displayTransformer or json decoding failed", e);
           break return_successfully;
@@ -5590,7 +5660,7 @@ class $7fa23e2a0079eca4$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) {
         $9HbP8$dwarn("displayTransformer failed", e);
       }
@@ -5626,13 +5696,12 @@ class $7fa23e2a0079eca4$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"
@@ -8229,7 +8298,7 @@ function $df5d81d0fe61ff21$export$f7d2f673fc2f091d({
   })));
   const available_filters_ = $9HbP8$createMemo(() => plp_products_()?.filters);
   const title = $9HbP8$createMemo(() => plp_meta()?.title);
-  const crumb_data_ = $df5d81d0fe61ff21$var$add_us_to_crumbs(plp_meta, title);
+  const crumb_data_ = $df5d81d0fe61ff21$var$add_us_to_crumbs(plp_meta);
   const quicklinks_data_ = $9HbP8$createMemo(() => plp_meta()?.quick_links);
   const [sort_or_filter_open_, set_sort_or_filter_open_] = $9HbP8$createSignal(false);
   const [desktop_filter_elements_, set_desktop_filter_elements] = $9HbP8$createSignal();
@@ -8507,31 +8576,16 @@ function $df5d81d0fe61ff21$export$f7d2f673fc2f091d({
 /**
  * Adds the current page as last breadcrumb to the breadcrumb trail
  */
-function $df5d81d0fe61ff21$var$add_us_to_crumbs(plp_meta, title) {
+function $df5d81d0fe61ff21$var$add_us_to_crumbs(plp_meta) {
   const href_accessor = $9HbP8$use_href_accessor();
   return $9HbP8$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, $9HbP8$mergeProps1(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 $ccd5db07a3a069c5$export$477caf01aecaeb2a(options) {
@@ -9138,7 +9192,7 @@ function $897bd4a76f611b38$export$d757d54550ebfb3d({
   category_suggestion_: category_suggestion_,
   router_: router_
 }) {
-  const parentTitle = $9HbP8$createMemo(() => category_suggestion_().breadcrumbs.at(-1)?.title);
+  const parentTitle = $9HbP8$createMemo(() => category_suggestion_().ancestors.at(-1)?.title);
   return (() => {
     const _el$ = $9HbP8$getNextElement($897bd4a76f611b38$var$_tmpl$2),
       _el$2 = _el$.firstChild,
@@ -9836,7 +9890,7 @@ function $7ad3a93cbe6fa208$export$a146ac6fa8346a25({
   currently_showing_suggestions_[1](value => {
     value[0] = $9HbP8$createMemo(() => previous_searches_().map(result => ({
       type: (0, $a0eb8b431ec1f87b$export$3cf9497e790da491),
-      title: result,
+      query: result,
       suggestions_result_id: "history"
     })));
     return value;
@@ -9956,10 +10010,7 @@ function $cea52f6b24092f05$export$e872e2339fb04a7f({
   submit_query_: submit_query_,
   get_content_results_: get_content_results_
 }) {
-  const queries_memo = $9HbP8$createMemo(() => suggestion_memo_().filter(({
-    type: type,
-    title: title
-  }) => type === (0, $a0eb8b431ec1f87b$export$3cf9497e790da491) && !filtered_previous_searches_().includes(title) // don't show the ones we already show from the history
+  const queries_memo = $9HbP8$createMemo(() => suggestion_memo_().filter(suggestion => suggestion.type === (0, $a0eb8b431ec1f87b$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 = $9HbP8$createMemo(() => {
@@ -9975,15 +10026,15 @@ function $cea52f6b24092f05$export$e872e2339fb04a7f({
     const is_query = $9HbP8$createMemo(() => input_obj().type === (0, $a0eb8b431ec1f87b$export$3cf9497e790da491));
     const href_with_changed_params_accessor = $9HbP8$createMemo(() => is_query() ? $a36cbc4f68bfd590$export$91c3b6774e8be0f5({
       param_: search_query_url_param_name_,
-      value_: $9HbP8$createMemo(() => input_obj().title),
+      value_: $9HbP8$createMemo(() => input_obj().query),
       url_transformer_: url_transformer_
     }) : undefined);
     const href = $9HbP8$createMemo(() => is_query() ? href_with_changed_params_accessor()() : input_obj().page_url);
     const is_selected = $9HbP8$createMemo(() => read_selected_index_()?.[0] === autocomplete_data_index && read_selected_index_()?.[1] === index);
     const parent_title_if_exists = $9HbP8$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$ = $9HbP8$getNextElement($cea52f6b24092f05$var$_tmpl$);
@@ -9993,8 +10044,9 @@ function $cea52f6b24092f05$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_({
@@ -10022,7 +10074,7 @@ function $cea52f6b24092f05$export$e872e2339fb04a7f({
         }), $9HbP8$createComponent((0, $f3213c0640246d58$export$ba17c5b7e6dda39f), {
           class_: "value line-clamp",
           get whole_text_to_display_() {
-            return $9HbP8$createMemo(() => input_obj().title);
+            return $9HbP8$createMemo(() => input_obj().query);
           },
           searching_for_value_: searching_for_value_
         })] : [$9HbP8$memo((() => {
@@ -10150,7 +10202,7 @@ function $cea52f6b24092f05$export$e872e2339fb04a7f({
               return (() => {
                 const mapped_history_results = $9HbP8$createMemo(() => filtered_previous_searches_().map(result => ({
                   type: (0, $a0eb8b431ec1f87b$export$3cf9497e790da491),
-                  title: result,
+                  query: result,
                   suggestions_result_id: "history" // worthless to fix typing
                 })));
 
@@ -10321,16 +10373,16 @@ function $15f380f0ce2812cc$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;
       $9HbP8$runWithOwner(owner, block_updating_for_one_change);
-      set_search_field_value(title);
+      set_search_field_value(query);
       $9HbP8$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 $92a48aea6a9364d8$export$1efe1013da60d0e4(e, url.href);
       }));
     } else if (selected_entry?.type == "listing" || selected_entry?.type === "content") $9HbP8$runWithOwner(owner, () => override_on_enter_for_this_entry(e => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depict-ai/ui",
-  "version": "3.0.6",
+  "version": "3.0.8",
   "description": "Base package containing the actual UI of Depict UI along with translations, with a not-simplified API. We recommend using @depict-ai/js-ui or @depict-ai/react-ui instead.",
   "packageManager": "yarn@3.2.2",
   "sass": "styles.scss",
@@ -236,9 +236,9 @@
     "@babel/plugin-transform-typescript": "^7.22.9",
     "@babel/runtime": "latest",
     "@babel/runtime-corejs3": "^7.22.6",
-    "@depict-ai/plp-styling": "^2.0.1",
-    "@depict-ai/types": "^5.0.1",
-    "@depict-ai/utilishared": "^2.0.1",
+    "@depict-ai/plp-styling": "^2.0.2",
+    "@depict-ai/types": "^5.0.2",
+    "@depict-ai/utilishared": "^2.0.2",
     "solid-js": "^1.8.1"
   },
   "type": "module",