@depict-ai/ui 4.7.24 → 4.7.26

package/latest/index.cjs

@@ -1,7 +1,7 @@
 var $gVhhF$depictaiutilishared = require("@depict-ai/utilishared/latest");
+var $gVhhF$depictaiutilisharedlatest = require("@depict-ai/utilishared/latest");
 var $gVhhF$solidjs = require("solid-js");
 var $gVhhF$solidjsweb = require("solid-js/web");
-var $gVhhF$depictaiutilisharedlatest = require("@depict-ai/utilishared/latest");
 var $gVhhF$solidjsstore = require("solid-js/store");
 require("../multi_import_deduplicator.cjs").register_es_version("ui", "latest");
 function $parcel$export(e, n, v, s) {
@@ -12,13 +12,14 @@ function $parcel$export(e, n, v, s) {
     configurable: true
   });
 }
+$parcel$export(module.exports, "useMobileHover", () => $8bf678c45948a297$export$d4d96868197be50e);
 $parcel$export(module.exports, "useVisibilityState", () => $55cbacb79d3e0cea$export$54299a3c81f5425);
 $parcel$export(module.exports, "useSlidableInformation", () => $a0e53f99354809d9$export$eaa625fb39439e37);
 $parcel$export(module.exports, "useProductCardIsVisible", () => $67155e1aeb7073f6$export$80bb7300ce6a8be3);
 $parcel$export(module.exports, "CurrentlyIntersectingContext", () => $67155e1aeb7073f6$export$f223d69ed12f5fb7);
 $parcel$export(module.exports, "useExpandingContainerReactive", () => $4b455f60dadde8b8$export$5bad61ecde080b1f);
 $parcel$export(module.exports, "LooksSliderOrGrid", () => $a3bbfa5fdaa39f3a$export$2c9f9bf2092486aa);
-$parcel$export(module.exports, "LookCard", () => $ad882bbe664dbd53$export$44809a8a3e867e30);
+$parcel$export(module.exports, "LookCard", () => $bda357ff87c46163$export$44809a8a3e867e30);
 $parcel$export(module.exports, "PseudoRouter", () => $e96dd13889871fc0$export$7e1297a3a19f10d8);
 $parcel$export(module.exports, "promiseSafeStructuredClone", () => $ac946c6b782bb900$export$83bb9af5671e1dbe);
 $parcel$export(module.exports, "preserve_items_in_history_dot_state", () => $d84fe647b84b5dc5$export$5162a71f252e6122);
@@ -103,7 +104,61 @@ $parcel$export(module.exports, "BreadCrumbs", () => $1f4925833f07df29$export$5b7
 $parcel$export(module.exports, "QuickLinks", () => $1f4925833f07df29$export$de035477d6fef996);
 $parcel$export(module.exports, "CategoryPage", () => $14f289047713d67a$export$e2bf8ce7779e827e);
 /*! Depict.ai search and product listing SDK */
-const $b757f75811f3261f$export$83d89fbfd8236492 = "4.7.24";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "4.7.26";
+let $8bf678c45948a297$var$elementsHoveredSignal;
+let $8bf678c45948a297$var$consumersSignal;
+function $8bf678c45948a297$export$d4d96868197be50e() {
+  if (!$8bf678c45948a297$var$elementsHoveredSignal || !$8bf678c45948a297$var$consumersSignal) $gVhhF$solidjs.createRoot(dispose => {
+    $8bf678c45948a297$var$elementsHoveredSignal = $gVhhF$solidjs.createSignal(new Set());
+    $8bf678c45948a297$var$consumersSignal = $gVhhF$solidjs.createSignal(0);
+    const [consumers] = $8bf678c45948a297$var$consumersSignal;
+    // No matter how often useMobileHover is called, only add one listener and get hovered elements once per touchmove event, for efficiency
+    $8bf678c45948a297$var$doHeavyCalculations();
+    $gVhhF$solidjs.createEffect(() => {
+      // No-one needs information anymore, stop listening
+      const users = consumers();
+      if (users < 1) {
+        $gVhhF$depictaiutilisharedlatest.dlog("Stopping to listen for mobile hover");
+        dispose();
+        $8bf678c45948a297$var$elementsHoveredSignal = undefined;
+        $8bf678c45948a297$var$consumersSignal = undefined;
+      }
+    });
+  });
+  const [elementsHovered] = $8bf678c45948a297$var$elementsHoveredSignal;
+  const [, setConsumers] = $8bf678c45948a297$var$consumersSignal;
+  setConsumers(prev => prev + 1);
+  $gVhhF$solidjs.onCleanup(() => setConsumers(prev => prev - 1));
+  return elementsHovered;
+}
+function $8bf678c45948a297$var$doHeavyCalculations() {
+  $gVhhF$depictaiutilisharedlatest.dlog("Starting to listen for mobile hover");
+  const [, setElementsHovered] = $8bf678c45948a297$var$elementsHoveredSignal;
+  const elementAtTouch = new Map();
+  const updateSet = () => setElementsHovered(new Set([...elementAtTouch.values()].filter(v => v)));
+  const setPositionHandler = $gVhhF$depictaiutilisharedlatest.catchify(evt => {
+    for (const touch of evt.changedTouches) elementAtTouch.set(touch.identifier, document.elementFromPoint(touch.clientX, touch.clientY));
+    updateSet();
+  });
+  const deleteTouchHandler = $gVhhF$depictaiutilisharedlatest.catchify(evt => {
+    for (const touch of evt.changedTouches) elementAtTouch.delete(touch.identifier);
+    updateSet();
+  });
+  addEventListener("touchstart", setPositionHandler, {
+    passive: true
+  });
+  addEventListener("touchend", deleteTouchHandler, {
+    passive: true
+  });
+  addEventListener("touchcancel", deleteTouchHandler, {
+    passive: true
+  });
+  $gVhhF$solidjs.onCleanup(() => {
+    removeEventListener("touchstart", setPositionHandler);
+    removeEventListener("touchend", deleteTouchHandler);
+    removeEventListener("touchcancel", deleteTouchHandler);
+  });
+}
 function $55cbacb79d3e0cea$export$54299a3c81f5425() {
   const d = document;
   const [isVisible, setIsVisible] = $gVhhF$solidjs.createSignal(d.visibilityState !== "hidden");
@@ -1437,11 +1492,11 @@ function $d659702496cb72ea$export$a71e92cfbb498adc(props) {
     return $gVhhF$depictaiutilishared.standard_price_format(props.price_, price_formatting.places_after_comma_, price_formatting.decimal_places_delimiter_, price_formatting.thousands_delimiter_);
   });
 }
-var $1ae437d7d388a66e$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=img-wrapper>`),
-  $1ae437d7d388a66e$var$_tmpl$2 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<span class="d-price original">`),
-  $1ae437d7d388a66e$var$_tmpl$3 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=right-part><div class=text-container><span class="d-title line-clamp"></span><span class=d-price></span><!$><!/></div><!$><!/>`),
-  $1ae437d7d388a66e$var$_tmpl$4 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<a class=look-item><!$><!/><!$><!/>`);
-function $1ae437d7d388a66e$export$b73ed90f0ee50dc3({
+var $0540c3739b32dc79$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=img-wrapper>`),
+  $0540c3739b32dc79$var$_tmpl$2 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<span class="d-price original">`),
+  $0540c3739b32dc79$var$_tmpl$3 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=right-part><div class=text-container><span class="d-title line-clamp"></span><span class=d-price></span><!$><!/></div><!$><!/>`),
+  $0540c3739b32dc79$var$_tmpl$4 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<a class=look-item><!$><!/><!$><!/>`);
+function $0540c3739b32dc79$export$b73ed90f0ee50dc3({
   display_: display_,
   FavoriteButton_: FavoriteButton_,
   userWantsExpandedSignal_: [userWantsExpanded, setUserWantsExpanded],
@@ -1467,7 +1522,7 @@ function $1ae437d7d388a66e$export$b73ed90f0ee50dc3({
   const FavoriteButton = FavoriteButton_; // Just to get rid of the type error - TS doesn't understand <Show>
   const title = $gVhhF$solidjs.createMemo(() => variantToUse()?.title);
   return (() => {
-    var _el$ = $gVhhF$solidjsweb.getNextElement($1ae437d7d388a66e$var$_tmpl$4),
+    var _el$ = $gVhhF$solidjsweb.getNextElement($0540c3739b32dc79$var$_tmpl$4),
       _el$12 = _el$.firstChild,
       [_el$13, _co$3] = $gVhhF$solidjsweb.getNextMarker(_el$12.nextSibling),
       _el$14 = _el$13.nextSibling,
@@ -1500,7 +1555,7 @@ function $1ae437d7d388a66e$export$b73ed90f0ee50dc3({
         });
       },
       get children() {
-        var _el$2 = $gVhhF$solidjsweb.getNextElement($1ae437d7d388a66e$var$_tmpl$);
+        var _el$2 = $gVhhF$solidjsweb.getNextElement($0540c3739b32dc79$var$_tmpl$);
         $gVhhF$solidjsweb.insert(_el$2, $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
           get when() {
             return imageUrl();
@@ -1535,7 +1590,7 @@ function $1ae437d7d388a66e$export$b73ed90f0ee50dc3({
         return (animationEffectExists() ? isExpandedThrottledByOurEffectRun() : userWantsExpanded()) || animationIsRunning();
       },
       get children() {
-        var _el$3 = $gVhhF$solidjsweb.getNextElement($1ae437d7d388a66e$var$_tmpl$3),
+        var _el$3 = $gVhhF$solidjsweb.getNextElement($0540c3739b32dc79$var$_tmpl$3),
           _el$4 = _el$3.firstChild,
           _el$5 = _el$4.firstChild,
           _el$6 = _el$5.nextSibling,
@@ -1615,7 +1670,7 @@ function $1ae437d7d388a66e$export$b73ed90f0ee50dc3({
             return isOnSale();
           },
           get children() {
-            var _el$7 = $gVhhF$solidjsweb.getNextElement($1ae437d7d388a66e$var$_tmpl$2);
+            var _el$7 = $gVhhF$solidjsweb.getNextElement($0540c3739b32dc79$var$_tmpl$2);
             $gVhhF$solidjsweb.insert(_el$7, $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
               get when() {
                 return variantToUse() && !originalPrice.loading;
@@ -1714,8 +1769,8 @@ async function $4f38102efa525ee0$var$checkIfIsAffectedByChromeBug326498383() {
   }
   return isAffected;
 }
-var $905010a06f9aeae5$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=scroll-padding><div class=look-overlay>`);
-function $905010a06f9aeae5$export$ebf0b1d4f90c09ae({
+var $912d9a717ceee184$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=scroll-padding><div class=look-overlay>`);
+function $912d9a717ceee184$export$ebf0b1d4f90c09ae({
   displays_: displays_,
   FavoriteButton_: FavoriteButton_,
   userWantsExpandedSignal_: userWantsExpandedSignal_,
@@ -1734,6 +1789,7 @@ function $905010a06f9aeae5$export$ebf0b1d4f90c09ae({
   const textFadeInAnimationRunning = $gVhhF$solidjs.createSignal(false);
   const [getSecondPartAnimationRunning] = textFadeInAnimationRunning;
   const [userWantsExpanded, setUserWantsExpanded] = userWantsExpandedSignal_;
+  //const elementsHovered = useMobileHover();
   $4f38102efa525ee0$export$7b9a0e99f0aeb2f3().then(is => isAffectedByChromeBug = is);
   return $gVhhF$solidjsweb.createComponent((0, $84798aaa863a4909$export$e68cff63f76bd15b), {
     get children() {
@@ -1742,21 +1798,37 @@ function $905010a06f9aeae5$export$ebf0b1d4f90c09ae({
           return containerWidth_() || !displays_();
         },
         get children() {
-          var _el$ = $gVhhF$solidjsweb.getNextElement($905010a06f9aeae5$var$_tmpl$),
+          var _el$ = $gVhhF$solidjsweb.getNextElement($912d9a717ceee184$var$_tmpl$),
             _el$2 = _el$.firstChild;
           $gVhhF$solidjsweb.addEventListener(_el$2, "mouseleave", $gVhhF$depictaiutilishared.catchify(() => supportsHover_() && setUserWantsExpanded(false)));
           $gVhhF$solidjsweb.addEventListener(_el$2, "mouseenter", $gVhhF$depictaiutilishared.catchify(() => supportsHover_() && setUserWantsExpanded(true)));
-          $gVhhF$solidjsweb.use(el => $gVhhF$solidjs.createEffect(() => {
-            if (userWantsExpanded()) return;
-            if (isAffectedByChromeBug) {
-              $905010a06f9aeae5$var$scrollingFunctionForChrome(el, 0, animationDuration_);
-              return;
-            }
-            el.scrollTo({
-              top: 0,
-              behavior: "smooth"
+          $gVhhF$solidjsweb.use(el => {
+            $gVhhF$solidjs.createEffect(() => {
+              if (userWantsExpanded()) return;
+              if (isAffectedByChromeBug) {
+                $912d9a717ceee184$var$scrollingFunctionForChrome(el, 0, animationDuration_);
+                return;
+              }
+              el.scrollTo({
+                top: 0,
+                behavior: "smooth"
+              });
             });
-          }), _el$2);
+            // createEffect(wasOpenedByHover => {
+            //   if (supportsHover_()) return;
+            //   const hovered = elementsHovered();
+            //   checkHovered: {
+            //     if (hovered.has(el)) break checkHovered;
+            //     for (const element of hovered) {
+            //       if (el.contains(element)) break checkHovered;
+            //     }
+            //     if (wasOpenedByHover) setUserWantsExpanded(false);
+            //     return;
+            //   }
+            //   setUserWantsExpanded(true);
+            //   return true;
+            // });
+          }, _el$2);
           $gVhhF$solidjsweb.insert(_el$2, $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Index), {
             get each() {
               return displays_() || Array.from({
@@ -1764,7 +1836,7 @@ function $905010a06f9aeae5$export$ebf0b1d4f90c09ae({
               });
             },
             children: (display, index) => {
-              return $gVhhF$solidjsweb.createComponent((0, $1ae437d7d388a66e$export$b73ed90f0ee50dc3), {
+              return $gVhhF$solidjsweb.createComponent((0, $0540c3739b32dc79$export$b73ed90f0ee50dc3), {
                 pseudoRouter_: pseudoRouter_,
                 animationDuration_: animationDuration_,
                 display_: display,
@@ -1805,7 +1877,7 @@ function $905010a06f9aeae5$export$ebf0b1d4f90c09ae({
 /**
  * Workaround for Chrome bug 326498383, adapted version of https://stackoverflow.com/a/39494245
  */
-function $905010a06f9aeae5$var$scrollingFunctionForChrome(element, targetScrollY, duration) {
+function $912d9a717ceee184$var$scrollingFunctionForChrome(element, targetScrollY, duration) {
   let start;
   const startingY = element.scrollTop;
   const diff = targetScrollY - startingY;
@@ -1822,8 +1894,8 @@ function $905010a06f9aeae5$var$scrollingFunctionForChrome(element, targetScrollY
   // Bootstrap our animation - it will get called right before next frame shall be rendered.
   requestAnimationFrame(step);
 }
-var $ad882bbe664dbd53$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=look-card><!$><!/><!$><!/>`);
-function $ad882bbe664dbd53$export$44809a8a3e867e30({
+var $bda357ff87c46163$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=look-card><!$><!/><!$><!/>`);
+function $bda357ff87c46163$export$44809a8a3e867e30({
   display_: display_,
   expandedLooksSignal_: [expandedLooks_, setExpandedLooks],
   FavoriteButton_: FavoriteButton_,
@@ -1880,7 +1952,7 @@ function $ad882bbe664dbd53$export$44809a8a3e867e30({
   // Close us if another look expands
   $gVhhF$solidjs.createEffect(() => !expandedLooks_().has(us) && setUserWantsExpanded(false));
   return (() => {
-    var _el$ = $gVhhF$solidjsweb.getNextElement($ad882bbe664dbd53$var$_tmpl$),
+    var _el$ = $gVhhF$solidjsweb.getNextElement($bda357ff87c46163$var$_tmpl$),
       _el$2 = _el$.firstChild,
       [_el$3, _co$] = $gVhhF$solidjsweb.getNextMarker(_el$2.nextSibling),
       _el$4 = _el$3.nextSibling,
@@ -1920,7 +1992,7 @@ function $ad882bbe664dbd53$export$44809a8a3e867e30({
         });
       }
     }), _el$3, _co$);
-    $gVhhF$solidjsweb.insert(_el$, $gVhhF$solidjsweb.createComponent((0, $905010a06f9aeae5$export$ebf0b1d4f90c09ae), {
+    $gVhhF$solidjsweb.insert(_el$, $gVhhF$solidjsweb.createComponent((0, $912d9a717ceee184$export$ebf0b1d4f90c09ae), {
       displays_: () => display_()?.displays,
       userWantsExpandedSignal_: useWantsExpandedSignal_,
       containerWidth_: containerWidth_,
@@ -2198,7 +2270,7 @@ function $a3bbfa5fdaa39f3a$export$2c9f9bf2092486aa(props) {
       return $a3bbfa5fdaa39f3a$var$runDisplayTransformersForLooks(baseData, listings, props.displayTransformers_);
     });
     const sharedOptions = {
-      product_card_template_: display => $ad882bbe664dbd53$export$44809a8a3e867e30({
+      product_card_template_: display => $bda357ff87c46163$export$44809a8a3e867e30({
         display_: () => display,
         FavoriteButton_: props.FavoriteButton_,
         placeholderImageAspectRatio_: props.imagePlaceholderAspectRatio_,
@@ -2856,7 +2928,7 @@ function $ce4b5b99c8b2b34e$export$a146ac6fa8346a25({
               ev.preventDefault();
               submit_query_(item());
             })), _el$4);
-            $gVhhF$solidjsweb.addEventListener(_el$4, "mouseleave", $gVhhF$depictaiutilishared.catchify(() => write_selected_index_(undefined)));
+            $gVhhF$solidjsweb.addEventListener(_el$4, "mouseleave", $gVhhF$depictaiutilishared.catchify(() => write_selected_index_()));
             $gVhhF$solidjsweb.addEventListener(_el$4, "mouseenter", $gVhhF$depictaiutilishared.catchify(() => write_selected_index_([0, index])));
             $gVhhF$solidjsweb.insert(_el$5, $gVhhF$solidjsweb.createComponent((0, $9e30168c4b1661d2$export$5d2caaa6b530761c), {}), _el$8, _co$);
             $gVhhF$solidjsweb.insert(_el$6, item);

package/latest/index.d.ts

@@ -11,7 +11,11 @@ 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.7.24";
+export const version = "4.7.26";
+/**
+ * Returns a set containing the element where every element currently touching the screen started touching it.
+ */
+export function useMobileHover(): import("solid-js").Accessor<Set<Element>>;
 /**
  * Returns if the current tab is visible
  */