@depict-ai/ui 3.0.18 → 3.0.20

package/server/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.18";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "3.0.20";
 const $0f313083912e447a$var$_tmpl$ = ["<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"></path></svg>'];
 function $0f313083912e447a$export$8be2714ec7f169ee(props = {}) {
   return $5vyXB$solidjsweb.ssr($0f313083912e447a$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.ssrAttribute("width", $5vyXB$solidjsweb.escape(props.width_, true) ?? 14, false) + $5vyXB$solidjsweb.ssrAttribute("height", $5vyXB$solidjsweb.escape(props.height_, true) ?? 26, false));
@@ -1882,7 +1882,8 @@ function $363ce4d1d71041aa$export$d41d19e89346fa2({
     disable_fading_: true,
     slider_ref_: slider => {
       const {
-        insert_here: insert_here
+        insert_here: insert_here,
+        container: container
       } = slider;
       const Layout = props => $f48d0fbb00835aaa$export$445d8d3f5f706a40(props, insert_here, true);
       // Do like this, so we don't have to call mergeProps ourselves
@@ -1892,6 +1893,7 @@ function $363ce4d1d71041aa$export$d41d19e89346fa2({
       }, layout_options_));
       $5vyXB$depictaiutilishared.slider_fractional_factory(0, 0.75).constructor_plugin.call(slider, {}); // enable fractional scrolling
       insert_here.before($fc23d7668ae0011d$export$a2cc176055f8f08());
+      container.classList.add("products");
     },
     get children() {
       return $5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Suspense), {
@@ -4874,7 +4876,8 @@ function $401aee5f33dca9e2$export$83fd5de5504a7a67({
     of_: of_
   },
   get_scroll_position_ = () => scrollY,
-  listen_to_scroll_on_: listen_to_scroll_on_
+  listen_to_scroll_on_: listen_to_scroll_on_,
+  velocity_too_fast_ = 1.5
 }) {
   if (0, $5vyXB$solidjsweb.isServer) return; // won't show in initial render and need scroll position
   const [first_to_show, set_first_to_show] = $5vyXB$solidjs.createSignal(0);
@@ -4882,6 +4885,7 @@ function $401aee5f33dca9e2$export$83fd5de5504a7a67({
   const [count_to_show, set_count_to_show] = $5vyXB$solidjs.createSignal("");
   const [permitted_to_show, set_permitted_to_show] = $5vyXB$solidjs.createSignal(false); // due to scroll speed
   const [show_triggered, set_show_triggered] = $5vyXB$solidjs.createSignal(false); // signal to just switch between true/false to trigger a new animation which will persist the indicator
+  const [times_too_fast, set_times_too_fast] = $5vyXB$solidjs.createSignal(0);
   const modified_price_formatting_ = $5vyXB$solidjs.createMemo(() => ({
     ...price_formatting_(),
     places_after_comma_: 0
@@ -4891,25 +4895,27 @@ function $401aee5f33dca9e2$export$83fd5de5504a7a67({
   let last_pos_time = +new Date();
   let last_pos = get_scroll_position_();
   let unpermit_when_possible = false;
-  let times_too_fast = 0;
   const handle_scrollpos_change = () => {
     if (animation) set_show_triggered(prev => !prev); // make sure that once we've decided to show the indicator it doesn't disappear before we stop scrolling
     const distance_travelled = Math.abs(get_scroll_position_() - last_pos);
     const now = +new Date();
     const age_of_distance = now - last_pos_time;
     const velocity = distance_travelled / age_of_distance; // pixels per millisecond
-    if (velocity > 1.5) {
-      times_too_fast++;
-      setTimeout(() => times_too_fast--, 1000);
+    if (velocity > velocity_too_fast_) {
+      set_times_too_fast(prev => prev + 1);
+      setTimeout(() => set_times_too_fast(prev => prev - 1), 1000);
     }
-    if (times_too_fast > 10) {
-      set_permitted_to_show(true);
-      unpermit_when_possible = false;
-    } else if (animation) unpermit_when_possible = true;else set_permitted_to_show(false);
     last_pos_time = now;
     last_pos = get_scroll_position_();
   };
   $76b6ac05693f5c71$export$205efb947c7ffd78(handle_scrollpos_change, undefined, listen_to_scroll_on_);
+  $5vyXB$solidjs.createComputed(() => {
+    // We need to set this reactively to ensure that it's forbidden to show even when times_too_fast has tapered off after a few seconds, see https://github.com/depict-org/depict/pull/82
+    if (times_too_fast() > 10) {
+      set_permitted_to_show(true);
+      unpermit_when_possible = false;
+    } else if (animation) unpermit_when_possible = true;else set_permitted_to_show(false);
+  });
   $5vyXB$solidjs.createEffect(() => {
     show_triggered();
     const first = get_first_result_in_viewport();
@@ -5685,6 +5691,7 @@ function $fe76fb463cc60b89$export$3925f87b1545cfc6({
                         }
                       }));
                       insert_here.classList.add("generated-spacing");
+                      container.classList.add("products");
                       $5vyXB$solidjs.createEffect(
                       // @ts-ignore
                       $5vyXB$solidjs.on(query_base_, () => insert_here.scrollTo({
@@ -5698,13 +5705,13 @@ function $fe76fb463cc60b89$export$3925f87b1545cfc6({
                         // Put scroll status into slider container, so it's centered relatively to the products
                         const rendered_scroll_status = ConfiguredScrollStatus({
                           get_scroll_position_: () => insert_here.scrollLeft,
-                          listen_to_scroll_on_: insert_here
+                          listen_to_scroll_on_: insert_here,
+                          velocity_too_fast_: 3 // Require twice as hard scrolling to show ScrollStatus in slider since it's easier to scroll fast there
                         });
-                        const {
-                          childNodes: childNodes
-                        } = container;
+
+                        const non_solid_nodes = [...container.childNodes];
                         // We have to use `insert` over Element.append, because ConfiguredScrollStatus is in an ErrorBoundary and therefore returns a function. `insert` will wipe all children, therefore save them first and then tell insert that the element should contain these elements + whatever ScrollStatus returns
-                        $5vyXB$solidjsweb.insert(container, $5vyXB$solidjs.createMemo(() => [...childNodes, rendered_scroll_status]));
+                        $5vyXB$solidjsweb.insert(container, $5vyXB$solidjs.createMemo(() => [...non_solid_nodes, rendered_scroll_status]));
                       }
                     },
                     children: listing_contents
@@ -6886,7 +6893,7 @@ function $6a8e766e914723d8$export$d31a1a1a83ad9413(plp_results_, [get_selected_f
 const $840d88a04b2d22a7$var$_tmpl$ = ["<div", ' class="product-count"><!--$-->', "<!--/--> <!--$-->", "<!--/--></div>"],
   $840d88a04b2d22a7$var$_tmpl$2 = ["<div", "></div>"],
   $840d88a04b2d22a7$var$_tmpl$3 = ["<div", ' class="filter-results-for-one-row"><!--$-->', "<!--/--><!--$-->", "<!--/--></div>"],
-  $840d88a04b2d22a7$var$_tmpl$4 = ["<div", ' class="depict plp category"><div class="listing-page"><!--$-->', "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--></div><!--$-->", "<!--/--><!--$-->", "<!--/--></div>"];
+  $840d88a04b2d22a7$var$_tmpl$4 = ["<div", ' class="depict plp category"><div class="listing-page"><!--$-->', "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--></div><!--$-->", "<!--/--></div>"];
 function $840d88a04b2d22a7$export$f7d2f673fc2f091d({
   depict_api_: depict_api_,
   id_to_query_for_: id_to_query_for_,
@@ -7207,22 +7214,22 @@ function $840d88a04b2d22a7$export$f7d2f673fc2f091d({
     }
   })), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
     get when() {
-      return layout_options_().layout === "grid";
+      return !layout_options_().layout?.startsWith("slider");
     },
     get children() {
-      return $5vyXB$solidjsweb.createComponent(ConfiguredScrollStatus, {});
-    }
-  })), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $edafe91daf3091d7$export$b69d0d92862de18b), {
-    severity_: "error",
-    message_: "Floating buttons failed",
-    get children() {
-      return $2fb324fbcc7b4a7b$export$b23abd26de154ede({
-        search_filters_open_: category_filters_open_,
-        search_sorting_open_: category_sorting_open_,
-        current_sorting_: current_sorting_,
-        sort_and_filter_element_: sort_and_filter_element_,
-        i18n_: i18n_
-      });
+      return [$5vyXB$solidjsweb.createComponent(ConfiguredScrollStatus, {}), $5vyXB$solidjsweb.createComponent((0, $edafe91daf3091d7$export$b69d0d92862de18b), {
+        severity_: "error",
+        message_: "Floating buttons failed",
+        get children() {
+          return $2fb324fbcc7b4a7b$export$b23abd26de154ede({
+            search_filters_open_: category_filters_open_,
+            search_sorting_open_: category_sorting_open_,
+            current_sorting_: current_sorting_,
+            sort_and_filter_element_: sort_and_filter_element_,
+            i18n_: i18n_
+          });
+        }
+      })];
     }
   })))];
 }

package/server/latest/index.d.ts

@@ -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.18";
+export const version = "3.0.20";
 export type SDKColsAtSize = [number, number?][];
 /**
  * Transform SDK ColsAtSize into valid Layout ColsAtSize

package/server/latest/index.js

@@ -7,7 +7,7 @@ import { createStore as $i7OB2$createStore, reconcile as $i7OB2$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.18";
+const $ec291e0010116877$export$83d89fbfd8236492 = "3.0.20";
 const $fbbadcb080ad1d4a$var$_tmpl$ = ["<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"></path></svg>'];
 function $fbbadcb080ad1d4a$export$8be2714ec7f169ee(props = {}) {
   return $i7OB2$ssr($fbbadcb080ad1d4a$var$_tmpl$, $i7OB2$ssrHydrationKey(), $i7OB2$ssrAttribute("width", $i7OB2$escape(props.width_, true) ?? 14, false) + $i7OB2$ssrAttribute("height", $i7OB2$escape(props.height_, true) ?? 26, false));
@@ -1812,7 +1812,8 @@ function $c4492d24952ed731$export$d41d19e89346fa2({
     disable_fading_: true,
     slider_ref_: slider => {
       const {
-        insert_here: insert_here
+        insert_here: insert_here,
+        container: container
       } = slider;
       const Layout = props => $c8d5ff4524619fcd$export$445d8d3f5f706a40(props, insert_here, true);
       // Do like this, so we don't have to call mergeProps ourselves
@@ -1822,6 +1823,7 @@ function $c4492d24952ed731$export$d41d19e89346fa2({
       }, layout_options_));
       $i7OB2$slider_fractional_factory(0, 0.75).constructor_plugin.call(slider, {}); // enable fractional scrolling
       insert_here.before($a458486f22b22f63$export$a2cc176055f8f08());
+      container.classList.add("products");
     },
     get children() {
       return $i7OB2$createComponent((0, $i7OB2$Suspense), {
@@ -4804,7 +4806,8 @@ function $6db49ca163afa2c3$export$83fd5de5504a7a67({
     of_: of_
   },
   get_scroll_position_ = () => scrollY,
-  listen_to_scroll_on_: listen_to_scroll_on_
+  listen_to_scroll_on_: listen_to_scroll_on_,
+  velocity_too_fast_ = 1.5
 }) {
   if (0, $i7OB2$isServer) return; // won't show in initial render and need scroll position
   const [first_to_show, set_first_to_show] = $i7OB2$createSignal(0);
@@ -4812,6 +4815,7 @@ function $6db49ca163afa2c3$export$83fd5de5504a7a67({
   const [count_to_show, set_count_to_show] = $i7OB2$createSignal("");
   const [permitted_to_show, set_permitted_to_show] = $i7OB2$createSignal(false); // due to scroll speed
   const [show_triggered, set_show_triggered] = $i7OB2$createSignal(false); // signal to just switch between true/false to trigger a new animation which will persist the indicator
+  const [times_too_fast, set_times_too_fast] = $i7OB2$createSignal(0);
   const modified_price_formatting_ = $i7OB2$createMemo(() => ({
     ...price_formatting_(),
     places_after_comma_: 0
@@ -4821,25 +4825,27 @@ function $6db49ca163afa2c3$export$83fd5de5504a7a67({
   let last_pos_time = +new Date();
   let last_pos = get_scroll_position_();
   let unpermit_when_possible = false;
-  let times_too_fast = 0;
   const handle_scrollpos_change = () => {
     if (animation) set_show_triggered(prev => !prev); // make sure that once we've decided to show the indicator it doesn't disappear before we stop scrolling
     const distance_travelled = Math.abs(get_scroll_position_() - last_pos);
     const now = +new Date();
     const age_of_distance = now - last_pos_time;
     const velocity = distance_travelled / age_of_distance; // pixels per millisecond
-    if (velocity > 1.5) {
-      times_too_fast++;
-      setTimeout(() => times_too_fast--, 1000);
+    if (velocity > velocity_too_fast_) {
+      set_times_too_fast(prev => prev + 1);
+      setTimeout(() => set_times_too_fast(prev => prev - 1), 1000);
     }
-    if (times_too_fast > 10) {
-      set_permitted_to_show(true);
-      unpermit_when_possible = false;
-    } else if (animation) unpermit_when_possible = true;else set_permitted_to_show(false);
     last_pos_time = now;
     last_pos = get_scroll_position_();
   };
   $8f9120a1ca151e6a$export$205efb947c7ffd78(handle_scrollpos_change, undefined, listen_to_scroll_on_);
+  $i7OB2$createComputed(() => {
+    // We need to set this reactively to ensure that it's forbidden to show even when times_too_fast has tapered off after a few seconds, see https://github.com/depict-org/depict/pull/82
+    if (times_too_fast() > 10) {
+      set_permitted_to_show(true);
+      unpermit_when_possible = false;
+    } else if (animation) unpermit_when_possible = true;else set_permitted_to_show(false);
+  });
   $i7OB2$createEffect(() => {
     show_triggered();
     const first = get_first_result_in_viewport();
@@ -5615,6 +5621,7 @@ function $2d25e42846eac370$export$3925f87b1545cfc6({
                         }
                       }));
                       insert_here.classList.add("generated-spacing");
+                      container.classList.add("products");
                       $i7OB2$createEffect(
                       // @ts-ignore
                       $i7OB2$on(query_base_, () => insert_here.scrollTo({
@@ -5628,13 +5635,13 @@ function $2d25e42846eac370$export$3925f87b1545cfc6({
                         // Put scroll status into slider container, so it's centered relatively to the products
                         const rendered_scroll_status = ConfiguredScrollStatus({
                           get_scroll_position_: () => insert_here.scrollLeft,
-                          listen_to_scroll_on_: insert_here
+                          listen_to_scroll_on_: insert_here,
+                          velocity_too_fast_: 3 // Require twice as hard scrolling to show ScrollStatus in slider since it's easier to scroll fast there
                         });
-                        const {
-                          childNodes: childNodes
-                        } = container;
+
+                        const non_solid_nodes = [...container.childNodes];
                         // We have to use `insert` over Element.append, because ConfiguredScrollStatus is in an ErrorBoundary and therefore returns a function. `insert` will wipe all children, therefore save them first and then tell insert that the element should contain these elements + whatever ScrollStatus returns
-                        $i7OB2$insert(container, $i7OB2$createMemo(() => [...childNodes, rendered_scroll_status]));
+                        $i7OB2$insert(container, $i7OB2$createMemo(() => [...non_solid_nodes, rendered_scroll_status]));
                       }
                     },
                     children: listing_contents
@@ -6816,7 +6823,7 @@ function $2ab89d64b7f1d5ef$export$d31a1a1a83ad9413(plp_results_, [get_selected_f
 const $df5d81d0fe61ff21$var$_tmpl$ = ["<div", ' class="product-count"><!--$-->', "<!--/--> <!--$-->", "<!--/--></div>"],
   $df5d81d0fe61ff21$var$_tmpl$2 = ["<div", "></div>"],
   $df5d81d0fe61ff21$var$_tmpl$3 = ["<div", ' class="filter-results-for-one-row"><!--$-->', "<!--/--><!--$-->", "<!--/--></div>"],
-  $df5d81d0fe61ff21$var$_tmpl$4 = ["<div", ' class="depict plp category"><div class="listing-page"><!--$-->', "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--></div><!--$-->", "<!--/--><!--$-->", "<!--/--></div>"];
+  $df5d81d0fe61ff21$var$_tmpl$4 = ["<div", ' class="depict plp category"><div class="listing-page"><!--$-->', "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--></div><!--$-->", "<!--/--></div>"];
 function $df5d81d0fe61ff21$export$f7d2f673fc2f091d({
   depict_api_: depict_api_,
   id_to_query_for_: id_to_query_for_,
@@ -7137,22 +7144,22 @@ function $df5d81d0fe61ff21$export$f7d2f673fc2f091d({
     }
   })), $i7OB2$escape($i7OB2$createComponent((0, $i7OB2$Show), {
     get when() {
-      return layout_options_().layout === "grid";
+      return !layout_options_().layout?.startsWith("slider");
     },
     get children() {
-      return $i7OB2$createComponent(ConfiguredScrollStatus, {});
-    }
-  })), $i7OB2$escape($i7OB2$createComponent((0, $b7436a6d1fd64e3b$export$b69d0d92862de18b), {
-    severity_: "error",
-    message_: "Floating buttons failed",
-    get children() {
-      return $0b0380f75d729d63$export$b23abd26de154ede({
-        search_filters_open_: category_filters_open_,
-        search_sorting_open_: category_sorting_open_,
-        current_sorting_: current_sorting_,
-        sort_and_filter_element_: sort_and_filter_element_,
-        i18n_: i18n_
-      });
+      return [$i7OB2$createComponent(ConfiguredScrollStatus, {}), $i7OB2$createComponent((0, $b7436a6d1fd64e3b$export$b69d0d92862de18b), {
+        severity_: "error",
+        message_: "Floating buttons failed",
+        get children() {
+          return $0b0380f75d729d63$export$b23abd26de154ede({
+            search_filters_open_: category_filters_open_,
+            search_sorting_open_: category_sorting_open_,
+            current_sorting_: current_sorting_,
+            sort_and_filter_element_: sort_and_filter_element_,
+            i18n_: i18n_
+          });
+        }
+      })];
     }
   })))];
 }