@depict-ai/ui 4.10.20 → 4.10.22

package/latest/index.d.ts

@@ -11,7 +11,7 @@ import { GetListingRequest } from "@depict-ai/types/api/GetListingRequest";
 import { BaseSearchRequestV3 } from "@depict-ai/types/api/BaseSearchRequestV3";
 import { FeaturedInDisplay } from "@depict-ai/types/api/FeaturedInResponseV3";
 import { SearchFilter as _SearchFilter3 } from "@depict-ai/types/api/SearchRequestV2";
-export const version = "4.10.20";
+export const version = "4.10.22";
 /**
  * Use `javascript_media_query` but return a reactive accessor instead of taking a callback function
  */
@@ -425,10 +425,8 @@ export function remap_blocks_to_index<T = () => JSX.Element | Promise<JSX.Elemen
   })[];
   n_cols_currently_showing_: number | null;
 }): {
-  content_blocks_by_index_: (Awaited<T> | T[])[];
-  readonly displaced_products_?: undefined;
-} | {
   readonly content_blocks_by_index_: (Awaited<T> | T[])[];
+  readonly rows_by_index_: number[][];
   readonly displaced_products_: (number | (true | undefined)[])[];
 };
 /** @jsxImportSource solid-js */
@@ -485,6 +483,10 @@ export class PseudoRouter {
    * We store listing_id in history.state and do operate on this both here and in js-ui, this is the key to be used which js-ui provides
    */
   listing_query_state_key: string | undefined;
+  /**
+   * Called when a go_to_ didn't change location.href, for example when following a link to the page one is already on. href_change_ipns stays silent then, so whoever waits for a href change to react to a navigation has to listen here too
+   */
+  navigation_to_same_href_listeners_: Set<VoidFunction>;
   navigate_: {
     /**
      * Call this if you *just* want to replace the state object in history.state

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 = "4.10.20";
+const $ec291e0010116877$export$83d89fbfd8236492 = "4.10.22";
 function $dc9262ef6f786812$export$d9f36cf74e24d595(media_query) {
   const signal = $9HbP8$createSignal(false);
   $9HbP8$onCleanup($9HbP8$javascript_media_query(media_query, ({
@@ -1130,8 +1130,14 @@ function $0449e7d49398c077$export$a1fd619a4743ca08({
     setFirstResultInViewport(Math.min(...intersecting) + 1); // +1 because we want to start counting at 1
     setLastResultsInViewport(Math.max(...intersecting) + 1);
   });
-  return renderedDisplays_;
+  // Content blocks placed after the last product (but still in its row) have no product card to render in front of, so render them after the cards once there are no more products to load
+  const trailingContentBlocks_ = $9HbP8$createMemo(() => {
+    if (!all_products_loaded_[0]()) return [];
+    return content_blocks_?.()?.trailing_?.(displays_by_key_().size) || [];
+  });
+  return [renderedDisplays_, trailingContentBlocks_]; // Regarding the as unknown: https://github.com/solidjs/solid/releases/tag/v1.7.0
 }
+
 var $c8d5ff4524619fcd$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<div>`),
   $c8d5ff4524619fcd$var$_tmpl$2 = /*#__PURE__*/$9HbP8$template(`<style type=text/css>`);
 function $c8d5ff4524619fcd$export$d21e32dfedac04be(props) {
@@ -1481,10 +1487,18 @@ function $e7a7eb102ddc0c79$export$791ef57e62e21c3f({
     set_top_row_shortened_by_(blocks_in_top_row_taken - 1); // minus one because the content block wrapper also is an element
   });
 
-  return $9HbP8$createMemo(() => $e7a7eb102ddc0c79$export$92aa5d691d588f3f({
+  const remapped_ = $9HbP8$createMemo(() => $e7a7eb102ddc0c79$export$92aa5d691d588f3f({
     wrapped_blocks_: get_wrapped_blocks_(),
     n_cols_currently_showing_: n_cols_currently_showing_()
-  }).content_blocks_by_index_);
+  }));
+  const content_blocks_by_index_ = $9HbP8$createMemo(() => remapped_().content_blocks_by_index_);
+  return Object.assign(content_blocks_by_index_, {
+    trailing_: product_count => $e7a7eb102ddc0c79$export$b94605e5b3ce01c({
+      ...remapped_(),
+      n_cols_currently_showing_: n_cols_currently_showing_(),
+      product_count: product_count
+    })
+  });
 }
 function $e7a7eb102ddc0c79$export$92aa5d691d588f3f({
   wrapped_blocks_: wrapped_blocks_,
@@ -1492,13 +1506,16 @@ function $e7a7eb102ddc0c79$export$92aa5d691d588f3f({
 }) {
   // This computation should be quite cheap since it just moves around things into an array
   const content_blocks_by_index_ = [];
+  const rows_by_index_ = []; // the row of each block at each index of content_blocks_by_index_, in the same order
   const constructed_block_arrays = new WeakSet();
   // Need to keep track of products displaced by blocks above when mapping rows to indexes in the actual grid
   const displaced_products_ = []; // undefined = is product, true = is content block if number instead of tuple number indicates content blocks in that row. Index in first array is row, index in second array is column
   if (!n_cols_currently_showing_)
     // Nope out of here if we don't know how many columns are showing
     return {
-      content_blocks_by_index_: content_blocks_by_index_
+      content_blocks_by_index_: content_blocks_by_index_,
+      rows_by_index_: rows_by_index_,
+      displaced_products_: displaced_products_
     };
   for (let i = 0; i < wrapped_blocks_.length; i++) {
     // i = row to show at
@@ -1543,6 +1560,7 @@ function $e7a7eb102ddc0c79$export$92aa5d691d588f3f({
         content_blocks_by_index_[final_target_index] = array;
       }
     } else content_blocks_by_index_[final_target_index] = block_content;
+    (rows_by_index_[final_target_index] ||= []).push(i);
     // Update displacement
     for (let j = 0; j < span_rows; j++) {
       const row = displaced_products_[i + j] ||= [];
@@ -1551,9 +1569,44 @@ function $e7a7eb102ddc0c79$export$92aa5d691d588f3f({
   }
   return {
     content_blocks_by_index_: content_blocks_by_index_,
+    rows_by_index_: rows_by_index_,
     displaced_products_: displaced_products_
   };
 }
+function $e7a7eb102ddc0c79$export$b94605e5b3ce01c({
+  content_blocks_by_index_: content_blocks_by_index_,
+  rows_by_index_: rows_by_index_,
+  displaced_products_: displaced_products_,
+  n_cols_currently_showing_: n_cols_currently_showing_,
+  product_count: product_count
+}) {
+  const trailing = [];
+  if (!n_cols_currently_showing_ || product_count <= 0) return trailing;
+  // Find the row the last product lands in: each row has room for the columns that blocks don't take up
+  let last_product_row = 0;
+  for (let seen_products = 0;; last_product_row++) {
+    const row = displaced_products_[last_product_row];
+    const taken_by_blocks = typeof row === "number" ? row : row ? row.filter(item => item).length : 0;
+    seen_products += Math.max(0, n_cols_currently_showing_ - taken_by_blocks);
+    if (seen_products >= product_count) break;
+    // Rows past the ones blocks take up all have room for products, so we're done by then at the latest
+    if (last_product_row >= displaced_products_.length + product_count) break;
+  }
+  for (let i = product_count; i < content_blocks_by_index_.length; i++) {
+    const block = content_blocks_by_index_[i];
+    if (block === undefined) continue;
+    const rows = rows_by_index_[i] || [];
+    if (Array.isArray(block) && rows.length > 1) {
+      // Several blocks share this index (e.g. the end of one row and the start of the next): keep the ones in the last product's row
+      const in_last_row = block.filter((_, j) => rows[j] <= last_product_row);
+      if (in_last_row.length) trailing.push(in_last_row);
+      continue;
+    }
+    if ((rows[0] ?? Infinity) > last_product_row) continue; // a row below the last product's row: keep it hidden
+    trailing.push(block);
+  }
+  return trailing;
+}
 /**
  * Takes a store that contains an array from where index is number of row and value is the result of executing the content block rendering function.
  * Then renders the content and wraps it into a div with the correct styling.
@@ -1603,6 +1656,7 @@ function $e7a7eb102ddc0c79$var$wrap_blocks_in_div(rendered_content_blocks, max_s
       content: () => {
         // Sneaky on-demand rendering, so we don't render more blocks than we can show: we have the rendered value here and don't return a function that renders because if our block would be moved around we'd be guaranteed to re-render
         // However, no need to count products to know if we should render: the <For> loops in Placeholders and render_displays will only call this function if there's actually a product here that wants to display this block
+        // (or, once all products have loaded, ResultsProductCards renders the blocks placed after the last product)
         set_rendering_delayed_(false);
         return content;
       },
@@ -2462,6 +2516,61 @@ function $1adfe60f3a14a1d7$export$fecbb157621501bd({
   return outmost_element;
 }
 $9HbP8$delegateEvents(["click"]);
+
+/**
+ * `HTMLElement.focus()` is a **silent no-op** on an element that is not being rendered
+ * (`display: none`, `visibility: hidden`, a collapsed menu). Nothing throws, focus simply
+ * stays where it was, so a caller that does not check believes it restored focus when it
+ * left it on `<body>` — which puts the keyboard user back at the top of the document.
+ *
+ * That is reachable whenever the element which opened a modal stops being rendered while the
+ * modal is open, and the common way for that to happen is the responsive-duplicate header:
+ * a theme renders the same search trigger twice, once for desktop and once for mobile, and
+ * hides one at the current breakpoint. Open the modal from the desktop trigger, cross the
+ * breakpoint (rotate a tablet, resize a window), close the modal, and the remembered trigger
+ * is still `isConnected` but no longer rendered. Verified against a live merchant storefront
+ * on 4.10.19.
+ *
+ * So: verify that focus landed, and when it did not, look for a rendered twin of the same
+ * control — the other half of the responsive pair — and use that instead.
+ */ /**
+    * An element can only take focus if it is actually being rendered.
+    *
+    * Injectable because it is the one part of this module that needs a layout engine: jsdom
+    * reports no client rects for anything, so the specs pass their own predicate to exercise the
+    * matching rules. The real predicate is only exercised in a browser.
+    */
+const $07001c226aedc5fb$export$e0652711c614c755 = element => !!element.getClientRects().length;
+/**
+ * `document.activeElement` is the outermost shadow host when focus is inside a shadow tree,
+ * so ask the element's own root rather than the document — matching how the rest of
+ * modal_opener treats shadow-mounted modals.
+ */
+const $07001c226aedc5fb$var$has_focus = element => element.getRootNode().activeElement === element;
+/**
+ * The accessible-name-ish identity we match twins on. Deliberately narrow: an explicit label
+ * or the trimmed text. Two controls that share a tag and this string are the same control
+ * rendered twice, which is exactly the responsive-duplicate case.
+ */
+const $07001c226aedc5fb$var$identity_of = element => (element.getAttribute("aria-label") || element.getAttribute("title") || element.textContent || "").trim().replace(/\s+/g, " ");
+function $07001c226aedc5fb$export$5800d9d535a06e96(element, rendered = $07001c226aedc5fb$export$e0652711c614c755) {
+  const identity = $07001c226aedc5fb$var$identity_of(element);
+  if (!identity) return; // nothing to match on — an icon-only button with no label
+  const twins = [...element.ownerDocument.querySelectorAll(element.localName)].filter(candidate => candidate !== element && rendered(candidate) && $07001c226aedc5fb$var$identity_of(candidate) === identity);
+  return twins.length === 1 ? twins[0] : undefined;
+}
+function $07001c226aedc5fb$export$51461d633c351649(element, rendered = $07001c226aedc5fb$export$e0652711c614c755) {
+  element.focus({
+    preventScroll: true
+  });
+  if ($07001c226aedc5fb$var$has_focus(element)) return true;
+  const twin = $07001c226aedc5fb$export$5800d9d535a06e96(element, rendered);
+  if (!twin) return false;
+  twin.focus({
+    preventScroll: true
+  });
+  return $07001c226aedc5fb$var$has_focus(twin);
+}
 async function $194bd6b8e4c59830$export$79b1565500412d9b(search_modal, modal_fn_opts, parent) {
   const body = parent || document.body || (await (0, $9HbP8$observer).wait_for_element("body"));
   let dispose_and_remove;
@@ -2522,9 +2631,12 @@ async function $194bd6b8e4c59830$export$79b1565500412d9b(search_modal, modal_fn_
                 });
                 focused = requested_focus_target.getRootNode().activeElement === requested_focus_target;
               }
-              if (!focused && element_focused_before_open?.isConnected) element_focused_before_open.focus({
-                preventScroll: true
-              });
+              if (!focused && element_focused_before_open?.isConnected)
+                // restore_focus_to rather than a bare focus(): the remembered trigger can be
+                // connected but no longer rendered (a responsive-duplicate header whose other
+                // half is showing now), and focus() on an unrendered element silently does
+                // nothing, leaving the keyboard user at the top of the page.
+                $07001c226aedc5fb$export$51461d633c351649(element_focused_before_open);
             } finally {
               // Cleared on a task instead of synchronously in case a browser delivers the focus event async
               setTimeout(() => restoring_focus = false, 0);
@@ -9165,16 +9277,20 @@ class $4fd2ba03703a7d92$export$7e1297a3a19f10d8 {
   * Function that will be called when we want to navigate, or a string saying it's not an SPA. You can change this OTG
   */ /**
      * We store listing_id in history.state and do operate on this both here and in js-ui, this is the key to be used which js-ui provides
-     */
-  #throwing_on_navigation(...args) {
+     */ /**
+        * Called when a go_to_ didn't change location.href, for example when following a link to the page one is already on. href_change_ipns stays silent then, so whoever waits for a href change to react to a navigation has to listen here too
+        */
+  navigation_to_same_href_listeners_ = new Set();
+  #throwing_on_navigation(options, on_throw_) {
     const {
       on_navigation_: on_navigation_
     } = this;
     if (typeof on_navigation_ !== "function") throw new Error("on_navigation_ is not a function");
     // make sure that we don't accidentally catchify if the SDK consumer has fucked up
     try {
-      return on_navigation_(...args);
+      return on_navigation_(options);
     } catch (e) {
+      on_throw_?.();
       queueMicrotask(() => {
         throw e;
       });
@@ -9195,6 +9311,28 @@ class $4fd2ba03703a7d92$export$7e1297a3a19f10d8 {
       (0, $9HbP8$instant_exec_on_suspect_history_change).add(handler);
     });
   }
+  /**
+  * Calls navigation_to_same_href_listeners_ if the navigation we're about to request ends on the href we're already on
+  * @returns function to stop watching, call it when the navigation failed
+  */
+  #watch_for_navigation_to_same_href(target_url) {
+    const href_before = location.href;
+    const stop_watching = () => {
+      (0, $9HbP8$instant_exec_on_suspect_history_change).delete(on_history_change);
+      clearTimeout(timeout);
+    };
+    const notify_if_href_unchanged = $9HbP8$catchify1(() => {
+      stop_watching();
+      if (location.href !== href_before) return;
+      this.navigation_to_same_href_listeners_.forEach(listener => $9HbP8$catchify1(listener)());
+    });
+    // The router has acted once it touches history, if the href is still the same then it took us to the page we're on
+    const on_history_change = () => notify_if_href_unchanged();
+    // A router asked to go to the exact href we're on might not touch history at all, so don't wait longer than 500ms for it. For any other target we can't tell a slow navigation from one that goes nowhere, so only stop listening after a while
+    const timeout = target_url.href === href_before ? setTimeout(notify_if_href_unchanged, 500) : setTimeout(stop_watching, 10000);
+    (0, $9HbP8$instant_exec_on_suspect_history_change).add(on_history_change);
+    return stop_watching;
+  }
   navigate_ = {
     /**
     * Call this if you *just* want to replace the state object in history.state
@@ -9234,6 +9372,7 @@ class $4fd2ba03703a7d92$export$7e1297a3a19f10d8 {
       }
       event_?.preventDefault();
       const promise = this.#get_navigation_happened_promise(true);
+      const stop_watching_for_same_href = this.#watch_for_navigation_to_same_href(new_url_);
       if (force_spa_navigation_ && wants_hard_navigation) {
         // Don't allow hard navigation if we're forcing SPA navigation, which we do for things where PageReplacer can be used for performance
         const new_state = history.state;
@@ -9247,7 +9386,7 @@ class $4fd2ba03703a7d92$export$7e1297a3a19f10d8 {
         is_replace: is_replace_,
         new_url: new_url_ instanceof URL ? new_url_ : new URL(new_url_, location.href),
         scroll: scroll
-      });
+      }, stop_watching_for_same_href);
       await promise;
     })
   };
@@ -10974,11 +11113,17 @@ var $ffb84ffbf4014982$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<svg xmlns=http
 function $ffb84ffbf4014982$export$8d8893ffd8aca39a() {
   return $9HbP8$getNextElement($ffb84ffbf4014982$var$_tmpl$);
 }
-function $512b994d501f412b$export$93d9bfd0c9c1a5b8(close_modal, search_query_url_param_name_) {
+function $512b994d501f412b$export$93d9bfd0c9c1a5b8(close_modal, search_query_url_param_name_, router_) {
   const [exit_iterable, exitable_iterable] = $9HbP8$make_asyncIterable_exiter((0, $9HbP8$href_change_ipns));
+  const {
+    navigation_to_same_href_listeners_: navigation_to_same_href_listeners_
+  } = router_;
   let set_initial_values = false;
   let old_pathname;
   let old_param_value;
+  // A card linking to the page one is already on doesn't change the href, close the modal anyway so the click does something
+  navigation_to_same_href_listeners_.add(close_modal);
+  $9HbP8$onCleanup(() => navigation_to_same_href_listeners_.delete(close_modal));
   $9HbP8$onCleanup($9HbP8$catchify1(exit_iterable));
   $9HbP8$catchify1(async () => {
     for await (const href of exitable_iterable) {
@@ -11134,7 +11279,7 @@ function $42912431795f188e$var$RawClassicSearchModal({
     return _el$;
   })();
   if (disable_scrolling_) $aea1edf92433e81e$export$fe334901e8bebd57();
-  $512b994d501f412b$export$93d9bfd0c9c1a5b8(close_modal_, search_query_url_param_name_);
+  $512b994d501f412b$export$93d9bfd0c9c1a5b8(close_modal_, search_query_url_param_name_, router_);
   window.addEventListener("keydown", close_on_escape_handler);
   $9HbP8$onCleanup($9HbP8$catchify1(() => window.removeEventListener("keydown", close_on_escape_handler)));
   if (closing_animation_) register_closing_animation_(closing_animation_);
@@ -12013,7 +12158,7 @@ function $500a16dd18ee5a71$var$RawSearchModalV2({
   });
   const noResults = $9HbP8$createMemo(prev => (get_modal_search_results_()?.loading === false && !suggestions_response_.loading || !!prev) && totalNumberResults() === 0 && previous_searches_matching_query().length === 0);
   if (disable_scrolling_) $aea1edf92433e81e$export$fe334901e8bebd57();
-  $512b994d501f412b$export$93d9bfd0c9c1a5b8(close_modal_, search_query_url_param_name_);
+  $512b994d501f412b$export$93d9bfd0c9c1a5b8(close_modal_, search_query_url_param_name_, router_);
   addEventListener("keydown", close_on_escape_handler);
   $9HbP8$onCleanup(() => removeEventListener("keydown", close_on_escape_handler));
   $9HbP8$createEffect($9HbP8$on(get_search_field_value_, () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depict-ai/ui",
-  "version": "4.10.20",
+  "version": "4.10.22",
   "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": "^7.22.6",
     "@babel/runtime-corejs3": "^7.22.6",
-    "@depict-ai/plp-styling": "^4.6.12",
-    "@depict-ai/types": "^5.6.10",
-    "@depict-ai/utilishared": "^2.6.10",
+    "@depict-ai/plp-styling": "^4.6.14",
+    "@depict-ai/types": "^5.6.12",
+    "@depict-ai/utilishared": "^2.6.12",
     "solid-js": "^1.9.10"
   },
   "type": "module",