@depict-ai/ui 4.7.21 → 4.7.23

package/ES10/index.cjs

@@ -1,6 +1,6 @@
 var $52FdA$depictaiutilishared = require("@depict-ai/utilishared/ES10");
-var $52FdA$solidjsweb = require("solid-js/web");
 var $52FdA$solidjs = require("solid-js");
+var $52FdA$solidjsweb = require("solid-js/web");
 var $52FdA$babelruntimehelpersdefineProperty = require("@babel/runtime/helpers/defineProperty");
 var $52FdA$depictaiutilisharedlatest = require("@depict-ai/utilishared/ES10");
 var $52FdA$babelruntimehelpersclassPrivateFieldSet = require("@babel/runtime/helpers/classPrivateFieldSet");
@@ -18,6 +18,8 @@ function $parcel$export(e, n, v, s) {
 function $parcel$interopDefault(a) {
   return a && a.__esModule ? a.default : a;
 }
+$parcel$export(module.exports, "useVisibilityState", () => $e7a7d2fe8a8217d8$export$54299a3c81f5425);
+$parcel$export(module.exports, "useSlidableInformation", () => $ad8ec7729fffeb9c$export$eaa625fb39439e37);
 $parcel$export(module.exports, "useProductCardIsVisible", () => $a52942afacbced93$export$80bb7300ce6a8be3);
 $parcel$export(module.exports, "CurrentlyIntersectingContext", () => $a52942afacbced93$export$f223d69ed12f5fb7);
 $parcel$export(module.exports, "useExpandingContainerReactive", () => $d6d51b09cb2116a6$export$5bad61ecde080b1f);
@@ -107,7 +109,116 @@ $parcel$export(module.exports, "BreadCrumbs", () => $335c02c1241a9ca8$export$5b7
 $parcel$export(module.exports, "QuickLinks", () => $335c02c1241a9ca8$export$de035477d6fef996);
 $parcel$export(module.exports, "CategoryPage", () => $c10e33c4681f8c9b$export$e2bf8ce7779e827e);
 /*! Depict.ai search and product listing SDK */
-const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.7.21";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.7.23";
+function $e7a7d2fe8a8217d8$export$54299a3c81f5425() {
+  const d = document;
+  const [isVisible, setIsVisible] = $52FdA$solidjs.createSignal(d.visibilityState !== "hidden");
+  const handleVisibilityChange = () => setIsVisible(d.visibilityState !== "hidden");
+  d.addEventListener("visibilitychange", handleVisibilityChange);
+  $52FdA$solidjs.onCleanup(() => d.removeEventListener("visibilitychange", handleVisibilityChange));
+  return isVisible;
+}
+var $9d19451330d04c3c$var$_tmpl$ = /*#__PURE__*/$52FdA$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 $9d19451330d04c3c$export$8be2714ec7f169ee() {
+  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (() => {
+    var _el$ = $52FdA$solidjsweb.getNextElement($9d19451330d04c3c$var$_tmpl$);
+    $52FdA$solidjsweb.effect(_p$ => {
+      var _props$width_, _props$height_;
+      var _v$ = (_props$width_ = props.width_) !== null && _props$width_ !== void 0 ? _props$width_ : 14,
+        _v$2 = (_props$height_ = props.height_) !== null && _props$height_ !== void 0 ? _props$height_ : 26;
+      _v$ !== _p$.e && $52FdA$solidjsweb.setAttribute(_el$, "width", _p$.e = _v$);
+      _v$2 !== _p$.t && $52FdA$solidjsweb.setAttribute(_el$, "height", _p$.t = _v$2);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
+    return _el$;
+  })();
+}
+var $ad8ec7729fffeb9c$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<div>`),
+  $ad8ec7729fffeb9c$var$_tmpl$2 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class="depict-slider depict"><button aria-label="Scroll left"class="left d-navbutton"type=button></button><button aria-label="Scroll right"class="right d-navbutton"type=button></button><div class=sliding>`);
+const $ad8ec7729fffeb9c$var$SlidableContext = /*@__PURE__*/$52FdA$solidjs.createContext();
+function $ad8ec7729fffeb9c$export$6649caad96ef8870(props) {
+  const {
+    slider_ref_: slider_ref_,
+    faded_opacity_ = 0.7,
+    mutation_plugins_ = [],
+    disable_fading_: disable_fading_,
+    snapAlign_: snapAlign_,
+    fadingThreshold_ = 0.96
+  } = props;
+  const [hasHydrated, setHasHydrated] = $52FdA$solidjs.createSignal(false);
+  $52FdA$solidjs.createEffect(() => setHasHydrated(true));
+  const MakeButton = () => (() => {
+    var _el$ = $52FdA$solidjsweb.getNextElement($ad8ec7729fffeb9c$var$_tmpl$);
+    $52FdA$solidjsweb.insert(_el$, $52FdA$solidjsweb.createComponent((0, $9d19451330d04c3c$export$8be2714ec7f169ee), {
+      get height_() {
+        return props.arrow_height_;
+      },
+      get width_() {
+        return props.arrow_width_;
+      }
+    }));
+    return _el$;
+  })();
+  // To support SSR it would be very hard to make Amazing_Slider compatible with solid's SSR because it would have to be rewritten in a more JSX way
+  // However, all it would do on the server (when used by SlidableItems) is creating the following 5 div elements
+  // Therefore, we just bail on the server (and first render on the client which is the hydration) and return a static version of the slider
+  // Once we have hydrated, we construct and insert the actual slider
+  return $52FdA$solidjsweb.createComponent((0, $52FdA$solidjs.Show), {
+    get when() {
+      return hasHydrated() && !(0, $52FdA$solidjsweb.isServer);
+    },
+    get fallback() {
+      return (() => {
+        var _el$2 = $52FdA$solidjsweb.getNextElement($ad8ec7729fffeb9c$var$_tmpl$2),
+          _el$3 = _el$2.firstChild,
+          _el$4 = _el$3.nextSibling,
+          _el$5 = _el$4.nextSibling;
+        $52FdA$solidjsweb.insert(_el$3, $52FdA$solidjsweb.createComponent(MakeButton, {}));
+        $52FdA$solidjsweb.insert(_el$4, $52FdA$solidjsweb.createComponent(MakeButton, {}));
+        $52FdA$solidjsweb.insert(_el$5, () => props.children);
+        return _el$2;
+      })();
+    },
+    get children() {
+      return (() => {
+        const [intersectionEntries_, setIntersectionEntries] = $52FdA$solidjs.createSignal([]);
+        const fading_plugin = disable_fading_ ? undefined : $52FdA$depictaiutilishared.slider_fading_factory({
+          threshold_: fadingThreshold_,
+          faded_opacity_: faded_opacity_
+        });
+        const slider = new (0, $52FdA$depictaiutilishared.Amazing_Slider)({
+          button_contents: {
+            left: [MakeButton()],
+            right: [MakeButton()]
+          },
+          constructor_plugins: [$52FdA$depictaiutilishared.slider_snap_css(0, {
+            align: snapAlign_
+          }).constructor_plugin, ...(fading_plugin ? [fading_plugin.constructor_plugin] : [])],
+          mutation_plugins: [...(fading_plugin ? [fading_plugin.mutation_plugin_] : []), ...mutation_plugins_, entries => setIntersectionEntries(entries)]
+        });
+        $52FdA$solidjsweb.insert(slider.insert_here, () => $52FdA$solidjsweb.createComponent($ad8ec7729fffeb9c$var$SlidableContext.Provider, {
+          value: {
+            slider_: slider,
+            intersectionEntries_: intersectionEntries_
+          },
+          get children() {
+            return props.children;
+          }
+        }));
+        $52FdA$solidjs.onCleanup(() => slider.observer.disconnect());
+        slider_ref_ === null || slider_ref_ === void 0 || slider_ref_(slider);
+        return slider.container;
+      })();
+    }
+  });
+}
+function $ad8ec7729fffeb9c$export$eaa625fb39439e37() {
+  return $52FdA$solidjs.useContext($ad8ec7729fffeb9c$var$SlidableContext);
+}
 
 /**
  * Gets product_id (the thing we key the rendering on) from a display
@@ -827,107 +938,6 @@ function $6c2c739b113a8ddf$export$445d8d3f5f706a40(props, container_element) {
   return [container_element, $52FdA$solidjsweb.memo(view_more_button_container), $52FdA$solidjsweb.memo(view_less_button_container), style_element];
 }
 $52FdA$solidjsweb.delegateEvents(["click"]);
-var $9d19451330d04c3c$var$_tmpl$ = /*#__PURE__*/$52FdA$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 $9d19451330d04c3c$export$8be2714ec7f169ee() {
-  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return (() => {
-    var _el$ = $52FdA$solidjsweb.getNextElement($9d19451330d04c3c$var$_tmpl$);
-    $52FdA$solidjsweb.effect(_p$ => {
-      var _props$width_, _props$height_;
-      var _v$ = (_props$width_ = props.width_) !== null && _props$width_ !== void 0 ? _props$width_ : 14,
-        _v$2 = (_props$height_ = props.height_) !== null && _props$height_ !== void 0 ? _props$height_ : 26;
-      _v$ !== _p$.e && $52FdA$solidjsweb.setAttribute(_el$, "width", _p$.e = _v$);
-      _v$2 !== _p$.t && $52FdA$solidjsweb.setAttribute(_el$, "height", _p$.t = _v$2);
-      return _p$;
-    }, {
-      e: undefined,
-      t: undefined
-    });
-    return _el$;
-  })();
-}
-var $ad8ec7729fffeb9c$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<div>`),
-  $ad8ec7729fffeb9c$var$_tmpl$2 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class="depict-slider depict"><button aria-label="Scroll left"class="left d-navbutton"type=button></button><button aria-label="Scroll right"class="right d-navbutton"type=button></button><div class=sliding>`);
-const $ad8ec7729fffeb9c$var$SlidableContext = /*@__PURE__*/$52FdA$solidjs.createContext();
-function $ad8ec7729fffeb9c$export$6649caad96ef8870(props) {
-  const {
-    slider_ref_: slider_ref_,
-    faded_opacity_ = 0.7,
-    mutation_plugins_ = [],
-    disable_fading_: disable_fading_,
-    snapAlign_: snapAlign_,
-    fadingThreshold_ = 0.96
-  } = props;
-  const [hasHydrated, setHasHydrated] = $52FdA$solidjs.createSignal(false);
-  $52FdA$solidjs.createEffect(() => setHasHydrated(true));
-  const MakeButton = () => (() => {
-    var _el$ = $52FdA$solidjsweb.getNextElement($ad8ec7729fffeb9c$var$_tmpl$);
-    $52FdA$solidjsweb.insert(_el$, $52FdA$solidjsweb.createComponent((0, $9d19451330d04c3c$export$8be2714ec7f169ee), {
-      get height_() {
-        return props.arrow_height_;
-      },
-      get width_() {
-        return props.arrow_width_;
-      }
-    }));
-    return _el$;
-  })();
-  // To support SSR it would be very hard to make Amazing_Slider compatible with solid's SSR because it would have to be rewritten in a more JSX way
-  // However, all it would do on the server (when used by SlidableItems) is creating the following 5 div elements
-  // Therefore, we just bail on the server (and first render on the client which is the hydration) and return a static version of the slider
-  // Once we have hydrated, we construct and insert the actual slider
-  return $52FdA$solidjsweb.createComponent((0, $52FdA$solidjs.Show), {
-    get when() {
-      return hasHydrated() && !(0, $52FdA$solidjsweb.isServer);
-    },
-    get fallback() {
-      return (() => {
-        var _el$2 = $52FdA$solidjsweb.getNextElement($ad8ec7729fffeb9c$var$_tmpl$2),
-          _el$3 = _el$2.firstChild,
-          _el$4 = _el$3.nextSibling,
-          _el$5 = _el$4.nextSibling;
-        $52FdA$solidjsweb.insert(_el$3, $52FdA$solidjsweb.createComponent(MakeButton, {}));
-        $52FdA$solidjsweb.insert(_el$4, $52FdA$solidjsweb.createComponent(MakeButton, {}));
-        $52FdA$solidjsweb.insert(_el$5, () => props.children);
-        return _el$2;
-      })();
-    },
-    get children() {
-      return (() => {
-        const [intersectionEntries_, setIntersectionEntries] = $52FdA$solidjs.createSignal([]);
-        const fading_plugin = disable_fading_ ? undefined : $52FdA$depictaiutilishared.slider_fading_factory({
-          threshold_: fadingThreshold_,
-          faded_opacity_: faded_opacity_
-        });
-        const slider = new (0, $52FdA$depictaiutilishared.Amazing_Slider)({
-          button_contents: {
-            left: [MakeButton()],
-            right: [MakeButton()]
-          },
-          constructor_plugins: [$52FdA$depictaiutilishared.slider_snap_css(0, {
-            align: snapAlign_
-          }).constructor_plugin, ...(fading_plugin ? [fading_plugin.constructor_plugin] : [])],
-          mutation_plugins: [...(fading_plugin ? [fading_plugin.mutation_plugin_] : []), ...mutation_plugins_, entries => setIntersectionEntries(entries)]
-        });
-        $52FdA$solidjsweb.insert(slider.insert_here, () => $52FdA$solidjsweb.createComponent($ad8ec7729fffeb9c$var$SlidableContext.Provider, {
-          value: {
-            slider_: slider,
-            intersectionEntries_: intersectionEntries_
-          },
-          get children() {
-            return props.children;
-          }
-        }));
-        $52FdA$solidjs.onCleanup(() => slider.observer.disconnect());
-        slider_ref_ === null || slider_ref_ === void 0 || slider_ref_(slider);
-        return slider.container;
-      })();
-    }
-  });
-}
-function $ad8ec7729fffeb9c$export$eaa625fb39439e37() {
-  return $52FdA$solidjs.useContext($ad8ec7729fffeb9c$var$SlidableContext);
-}
 var $236a257ee52e5414$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<h2 class=recs-title>`);
 function $236a257ee52e5414$export$d41d19e89346fa2(_ref) {
   let {
@@ -1737,17 +1747,17 @@ function $d66c35b5a6d6d926$export$b73ed90f0ee50dc3(_ref) {
     return _el$;
   })();
 }
-var $dfa95866b27a2a53$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<div style=position:absolute;width:10px;height:10px;overflow:hidden>`);
-let $dfa95866b27a2a53$var$cachedValue;
-async function $dfa95866b27a2a53$export$7b9a0e99f0aeb2f3() {
-  if ($dfa95866b27a2a53$var$cachedValue != undefined) return $dfa95866b27a2a53$var$cachedValue;
-  return $dfa95866b27a2a53$var$cachedValue = $dfa95866b27a2a53$var$checkIfIsAffectedByChromeBug326498383();
+var $b5e1e9638abb90ff$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<div style=position:absolute;width:10px;height:10px;overflow:hidden>`);
+let $b5e1e9638abb90ff$var$cachedValue;
+async function $b5e1e9638abb90ff$export$7b9a0e99f0aeb2f3() {
+  if ($b5e1e9638abb90ff$var$cachedValue != undefined) return $b5e1e9638abb90ff$var$cachedValue;
+  return $b5e1e9638abb90ff$var$cachedValue = $b5e1e9638abb90ff$var$checkIfIsAffectedByChromeBug326498383();
 }
-async function $dfa95866b27a2a53$var$checkIfIsAffectedByChromeBug326498383() {
+async function $b5e1e9638abb90ff$var$checkIfIsAffectedByChromeBug326498383() {
   let isAffected = true;
   let resolveTimeoutPromise;
   try {
-    const div = $52FdA$solidjsweb.getNextElement($dfa95866b27a2a53$var$_tmpl$);
+    const div = $52FdA$solidjsweb.getNextElement($b5e1e9638abb90ff$var$_tmpl$);
     const waitAFrame = () => new Promise(r => requestAnimationFrame(() => requestAnimationFrame(r)));
     const timeoutPromise = new Promise(r => {
       resolveTimeoutPromise = r;
@@ -1760,7 +1770,7 @@ async function $dfa95866b27a2a53$var$checkIfIsAffectedByChromeBug326498383() {
       style: style
     } = div;
     // Just to get a long string
-    div.append($dfa95866b27a2a53$export$7b9a0e99f0aeb2f3 + "");
+    div.append($b5e1e9638abb90ff$export$7b9a0e99f0aeb2f3 + "");
     document.documentElement.append(div);
     style.overflow = "auto";
     await waitAFrame();
@@ -1808,7 +1818,7 @@ function $e0b3f1f332b6863b$export$ebf0b1d4f90c09ae(_ref) {
   const textFadeInAnimationRunning = $52FdA$solidjs.createSignal(false);
   const [getSecondPartAnimationRunning] = textFadeInAnimationRunning;
   const [userWantsExpanded, setUserWantsExpanded] = userWantsExpandedSignal_;
-  $dfa95866b27a2a53$export$7b9a0e99f0aeb2f3().then(is => isAffectedByChromeBug = is);
+  $b5e1e9638abb90ff$export$7b9a0e99f0aeb2f3().then(is => isAffectedByChromeBug = is);
   return $52FdA$solidjsweb.createComponent((0, $d067f3a30f047b41$export$e68cff63f76bd15b), {
     get children() {
       return $52FdA$solidjsweb.createComponent((0, $52FdA$solidjs.Show), {

package/ES10/index.d.ts

@@ -1,5 +1,5 @@
-import { JSX, Accessor, Setter, Signal } from "solid-js";
-import { Display, useExpandingContainer, ColsAtSize, report, Amazing_Slider, Elem, ModernDisplay, Node_Array } from "@depict-ai/utilishared/ES10";
+import { Accessor, JSX, Setter, Signal } from "solid-js";
+import { Amazing_Slider, Display, useExpandingContainer, ColsAtSize, report, Elem, ModernDisplay, Node_Array } from "@depict-ai/utilishared/ES10";
 import { SearchFilter, SearchRequestV3, SortModel } from "@depict-ai/types/api/SearchRequestV3";
 import { ContentLink, SearchResponse, SearchFilter as _SearchFilter1 } from "@depict-ai/types/api/SearchResponse";
 import { Ancestors, ListingSuggestion, SearchSuggestionsResponseV3 } from "@depict-ai/types/api/SearchSuggestionsResponseV3";
@@ -11,7 +11,34 @@ 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.21";
+export const version = "4.7.23";
+/**
+ * Returns if the current tab is visible
+ */
+export function useVisibilityState(): import("solid-js").Accessor<boolean>;
+/** @jsxImportSource solid-js */
+export function GenericSliderArrowButton(props?: {
+  width_?: number;
+  height_?: number;
+}): SVGElement;
+export function SlidableItems(props: {
+  children?: JSX.Element;
+  slider_ref_?: (slider: Amazing_Slider) => any;
+  faded_opacity_?: number;
+  disable_fading_?: boolean;
+  snapAlign_?: "start" | "end" | "center";
+  fadingThreshold_?: number;
+  mutation_plugins_?: ((this: Amazing_Slider, mutations: IntersectionObserverEntry[], intersecting_items: Record<number, IntersectionObserverEntry>) => unknown)[];
+  arrow_width_?: number;
+  arrow_height_?: number;
+}): JSX.Element;
+/**
+ * Use this inside the children of a <SlidableItems> component to get the slider instance and a signal that contains the latest intersection obsrever entries (note they are accessible on the slider instance in a processed format already at the time this acessor updates)
+ */
+export function useSlidableInformation(): {
+  slider_: Amazing_Slider;
+  intersectionEntries_: Accessor<IntersectionObserverEntry[]>;
+} | undefined;
 declare const LISTING_ID = "listingId";
 declare const EXTERNAL_ID = "externalId";
 type ScrollRestorationData = {
@@ -129,22 +156,6 @@ export function SolidLayout(props: SolidLayoutOptions): JSX.Element;
  * When using insert_after_container, view more and view less buttons are not currently supported.
  */
 export function SolidLayoutWithProvidedElement(props: Omit<SolidLayoutOptions, "children" | "element_attributes">, container_element: HTMLDivElement, insert_after_container?: boolean, container_class?: string): JSX.Element;
-/** @jsxImportSource solid-js */
-export function GenericSliderArrowButton(props?: {
-  width_?: number;
-  height_?: number;
-}): SVGElement;
-export function SlidableItems(props: {
-  children?: JSX.Element;
-  slider_ref_?: (slider: Amazing_Slider) => any;
-  faded_opacity_?: number;
-  disable_fading_?: boolean;
-  snapAlign_?: "start" | "end" | "center";
-  fadingThreshold_?: number;
-  mutation_plugins_?: ((this: Amazing_Slider, mutations: IntersectionObserverEntry[], intersecting_items: Record<number, IntersectionObserverEntry>) => unknown)[];
-  arrow_width_?: number;
-  arrow_height_?: number;
-}): JSX.Element;
 /**
  * Provider to wrap every listing (group of products) in
  * Used for example for deduplicating ResizeObservers for responsive images