@streamlayer/react-ui 1.9.0 → 1.11.0

package/lib/app/masters/useSdkResponsive.js

@@ -0,0 +1,45 @@
+import c from "lodash.throttle";
+import { useState as m, useEffect as u } from "react";
+import { BREAKPOINTS as r } from "../../ui/theme/constants.js";
+import { m as l } from "../../index-CZvwzN5o.js";
+const d = Object.keys(r), i = () => {
+  const n = window.innerWidth;
+  let e = "sm";
+  for (let t = d.length - 1; t > 0; t--) {
+    const s = d[t];
+    if (!(n < r[s]) && n >= r[s]) {
+      e = s;
+      break;
+    }
+  }
+  return {
+    name: e,
+    size: r[e]
+  };
+}, w = (n) => {
+  var e;
+  return (((e = n.current) == null ? void 0 : e.getBoundingClientRect().y) || 0) < -68;
+}, k = (n) => n >= r.xl, v = (n) => {
+  const [e] = m(() => {
+    const t = i();
+    return l({
+      screen: i(),
+      sdkInView: w(n),
+      sdkInDesktopView: k(t.size)
+    });
+  });
+  return u(() => {
+    const t = c(() => {
+      e.setKey("sdkInView", w(n));
+    }, 200), s = c(() => {
+      const o = i();
+      e.setKey("screen", o), e.setKey("sdkInDesktopView", k(o.size));
+    }, 200);
+    return window.addEventListener("scroll", t), window.addEventListener("resize", s), () => {
+      window.removeEventListener("scroll", t), window.removeEventListener("resize", s);
+    };
+  }, [e, n]), [e];
+};
+export {
+  v as useSdkResponsive
+};

package/lib/app/masters/useSdkScroll.d.ts

@@ -0,0 +1,12 @@
+import { ScrollNodeRef, AppNodeRef } from '..';
+import { MapStore } from 'nanostores';
+import { ResponsiveStore } from './useSdkResponsive';
+type ScrollData = {
+    scrollPosition: number;
+    tabsShown?: boolean;
+    scrollDirection: 'forward' | 'backward';
+};
+export type ScrollStore = MapStore<ScrollData>;
+export declare const scrollIntoAppView: (appNode: AppNodeRef, screenSize: number, options?: ScrollIntoViewOptions) => void;
+export declare const useSdkScroll: (appNode: AppNodeRef, responsiveStore: ResponsiveStore) => [ScrollNodeRef, ScrollStore];
+export {};

package/lib/app/masters/useSdkScroll.js

@@ -0,0 +1,50 @@
+import { useStore as S } from "@nanostores/react";
+import h from "lodash.throttle";
+import { useRef as m, useState as b, useEffect as g } from "react";
+import { BREAKPOINTS as c } from "../../ui/theme/constants.js";
+import { m as v } from "../../index-CZvwzN5o.js";
+const C = (o, e, n) => {
+  const t = e >= c.lg && e < c.xl ? 75 : 52;
+  o.current && window.scrollTo({
+    top: o.current.offsetTop - t,
+    ...n
+  });
+}, T = 15, D = (o, e) => {
+  const n = m(null), t = m(0), [s] = b(
+    v({
+      scrollPosition: 0,
+      tabsShown: !0,
+      scrollDirection: "forward"
+    })
+  ), i = S(e);
+  return g(() => {
+    const l = window.innerWidth < c.xl ? window : n.current;
+    if (!l)
+      return () => {
+      };
+    const f = h((d) => {
+      var a;
+      const u = d.target;
+      if (!u)
+        return;
+      let r = 0;
+      i.screen.size < c.xl ? r = ((a = o.current) == null ? void 0 : a.getBoundingClientRect().y) || 0 : r = u.scrollTop;
+      const w = t.current - r;
+      if (T > Math.abs(w))
+        return;
+      const p = t.current < r ? "forward" : "backward";
+      t.current = r, s.set({
+        scrollPosition: Math.round(r),
+        scrollDirection: p,
+        tabsShown: s.get().tabsShown
+      });
+    }, 200);
+    return l.addEventListener("scroll", f), () => {
+      l.removeEventListener("scroll", f);
+    };
+  }, [s, o, i.screen]), [n, s];
+};
+export {
+  C as scrollIntoAppView,
+  D as useSdkScroll
+};

package/lib/app/useSdkResponsive.d.ts

@@ -10,6 +10,7 @@ type ResponsiveData = {
     sdkInView: boolean;
     sdkInDesktopView: boolean;
 };
+export declare const checkSdkInDesktopView: () => boolean;
 export type ResponsiveStore = MapStore<ResponsiveData>;
 export declare const useSdkResponsive: (appNode: AppNodeRef) => [ResponsiveStore];
 export {};

package/lib/app/useSdkResponsive.js

@@ -1,13 +1,13 @@
-import c from "lodash.throttle";
-import { useState as m, useEffect as u } from "react";
+import i from "lodash.throttle";
+import { useState as m, useEffect as a } from "react";
 import { BREAKPOINTS as r } from "../ui/theme/constants.js";
-import { m as l } from "../index-CZvwzN5o.js";
-const d = Object.keys(r), i = () => {
-  const n = window.innerWidth;
+import { m as u } from "../index-CZvwzN5o.js";
+const o = Object.keys(r), c = () => {
+  const t = window.innerWidth;
   let e = "sm";
-  for (let t = d.length - 1; t > 0; t--) {
-    const s = d[t];
-    if (!(n < r[s]) && n >= r[s]) {
+  for (let n = o.length - 1; n > 0; n--) {
+    const s = o[n];
+    if (!(t < r[s]) && t >= r[s]) {
       e = s;
       break;
     }
@@ -16,30 +16,28 @@ const d = Object.keys(r), i = () => {
     name: e,
     size: r[e]
   };
-}, w = (n) => {
+}, d = (t) => {
   var e;
-  return (((e = n.current) == null ? void 0 : e.getBoundingClientRect().y) || 0) < -68;
-}, k = (n) => n >= r.xl, v = (n) => {
-  const [e] = m(() => {
-    const t = i();
-    return l({
-      screen: i(),
-      sdkInView: w(n),
-      sdkInDesktopView: k(t.size)
-    });
-  });
-  return u(() => {
-    const t = c(() => {
-      e.setKey("sdkInView", w(n));
-    }, 200), s = c(() => {
-      const o = i();
-      e.setKey("screen", o), e.setKey("sdkInDesktopView", k(o.size));
+  return (((e = t.current) == null ? void 0 : e.getBoundingClientRect().y) || 0) < -68;
+}, w = () => window.matchMedia("(orientation: landscape)").matches, h = (t) => {
+  const [e] = m(() => u({
+    screen: c(),
+    sdkInView: d(t),
+    sdkInDesktopView: w()
+  }));
+  return a(() => {
+    const n = i(() => {
+      e.setKey("sdkInView", d(t));
+    }, 200), s = i(() => {
+      const k = c();
+      e.setKey("screen", k), e.setKey("sdkInDesktopView", w());
     }, 200);
-    return window.addEventListener("scroll", t), window.addEventListener("resize", s), () => {
-      window.removeEventListener("scroll", t), window.removeEventListener("resize", s);
+    return window.addEventListener("scroll", n), window.addEventListener("resize", s), () => {
+      window.removeEventListener("scroll", n), window.removeEventListener("resize", s);
     };
-  }, [e, n]), [e];
+  }, [e, t]), [e];
 };
 export {
-  v as useSdkResponsive
+  w as checkSdkInDesktopView,
+  h as useSdkResponsive
 };

package/lib/app/useSdkScroll.js

@@ -1,50 +1,51 @@
-import { useStore as S } from "@nanostores/react";
-import h from "lodash.throttle";
-import { useRef as m, useState as b, useEffect as g } from "react";
-import { BREAKPOINTS as c } from "../ui/theme/constants.js";
+import { useStore as h } from "@nanostores/react";
+import b from "lodash.throttle";
+import { useRef as u, useState as g, useEffect as k } from "react";
+import { BREAKPOINTS as a } from "../ui/theme/constants.js";
+import { checkSdkInDesktopView as m } from "./useSdkResponsive.js";
 import { m as v } from "../index-CZvwzN5o.js";
-const C = (o, e, n) => {
-  const t = e >= c.lg && e < c.xl ? 75 : 52;
+const I = (o, e, n) => {
+  const t = e >= a.lg && e < a.xl ? 75 : 52;
   o.current && window.scrollTo({
     top: o.current.offsetTop - t,
     ...n
   });
-}, T = 15, D = (o, e) => {
-  const n = m(null), t = m(0), [s] = b(
+}, T = 15, L = (o, e) => {
+  const n = u(null), t = u(0), [s] = g(
     v({
       scrollPosition: 0,
       tabsShown: !0,
       scrollDirection: "forward"
     })
-  ), i = S(e);
-  return g(() => {
-    const l = window.innerWidth < c.xl ? window : n.current;
-    if (!l)
+  ), d = h(e);
+  return k(() => {
+    const c = m() ? n.current : window;
+    if (!c)
       return () => {
       };
-    const f = h((d) => {
-      var a;
-      const u = d.target;
-      if (!u)
+    const l = b((p) => {
+      var f;
+      const i = p.target;
+      if (!i)
         return;
       let r = 0;
-      i.screen.size < c.xl ? r = ((a = o.current) == null ? void 0 : a.getBoundingClientRect().y) || 0 : r = u.scrollTop;
+      m() ? r = i.scrollTop : r = ((f = o.current) == null ? void 0 : f.getBoundingClientRect().y) || 0;
       const w = t.current - r;
       if (T > Math.abs(w))
         return;
-      const p = t.current < r ? "forward" : "backward";
+      const S = t.current < r ? "forward" : "backward";
       t.current = r, s.set({
         scrollPosition: Math.round(r),
-        scrollDirection: p,
+        scrollDirection: S,
         tabsShown: s.get().tabsShown
       });
     }, 200);
-    return l.addEventListener("scroll", f), () => {
-      l.removeEventListener("scroll", f);
+    return c.addEventListener("scroll", l), () => {
+      c.removeEventListener("scroll", l);
     };
-  }, [s, o, i.screen]), [n, s];
+  }, [s, o, d.screen]), [n, s];
 };
 export {
-  C as scrollIntoAppView,
-  D as useSdkScroll
+  I as scrollIntoAppView,
+  L as useSdkScroll
 };