@streamlayer/react-ui 0.98.0 → 0.98.1

package/lib/ui/modal/index.js

@@ -1,52 +1,60 @@
-import { jsxs as a, jsx as s } from "react/jsx-runtime";
-import { cx as m } from "@linaria/core";
-import { styled as f } from "@linaria/react";
-import { useState as u, useCallback as i, useEffect as c } from "react";
-import { r as d } from "../../index-jRXrW6ie.js";
+import { jsxs as p, jsx as u } from "react/jsx-runtime";
+import { styled as h } from "@linaria/react";
+import { useState as w, useEffect as m } from "react";
+import { r as a } from "../../index-jRXrW6ie.js";
+import { BREAKPOINTS as n } from "../theme/constants.js";
 import "../../index-uEuzH3jr.js";
-const p = /* @__PURE__ */ f("div")({
+const y = /* @__PURE__ */ h("div")({
   name: "StaticContainer",
   class: "svm502q",
   propsAsIs: !1
-}), v = "fd3gza8", x = `
-  body {
-    overflow: hidden !important;
-  }
-`, y = `
+}), g = `
   .sl-hide-on-modal {
-    display: none !important;
+    height: 0 !important;
+    opacity: 0 !important;
+    overflow: hidden !important;
   }
-`, h = `
+`, O = `
   .sl-pill-button {
     display: none !important;
   }
-`, E = (r) => {
-  const [t, n] = u(r), o = i((l) => {
-    l.target instanceof HTMLAnchorElement && l.target.href.slice(-1) === "#" && n(!1);
-  }, []), e = i(() => n(!1), []);
-  return c(() => (r && (document.addEventListener("scroll", e), document.addEventListener("click", o)), () => {
-    document.removeEventListener("scroll", e), document.removeEventListener("click", o);
-  }), [r, e, o]), c(() => {
-    t === !1 && (document.removeEventListener("scroll", e), document.removeEventListener("click", o));
-  }, [t, e, o]), [t];
-}, V = ({
-  children: r,
+`, k = ({
+  children: i,
   container: t,
-  fixedView: n,
-  useContainer: o
+  useContainer: f
 }) => {
-  const [e] = E(n);
-  return t.current ? o ? d.createPortal(/* @__PURE__ */ a(p, {
-    className: m(e && v),
-    children: [r, e && /* @__PURE__ */ s("style", {
-      children: x
-    }), !e && /* @__PURE__ */ s("style", {
-      children: y
-    }), /* @__PURE__ */ s("style", {
-      children: h
+  const [l] = w(() => {
+    var r;
+    const e = window.innerWidth >= n.lg && window.innerWidth < n.xl ? 75 : 52;
+    return (((r = t.current) == null ? void 0 : r.getBoundingClientRect().y) || 0) - e < 0;
+  }), [o, s] = w(!1);
+  return m(() => {
+    if (!t.current || !l)
+      return s(!0), () => {
+      };
+    const e = window.scrollY;
+    return s(!0), () => {
+      var c;
+      const d = window.innerWidth >= n.lg && window.innerWidth < n.xl ? 75 : 52;
+      (((c = t.current) == null ? void 0 : c.getBoundingClientRect().y) || 0) - d < 0 && window.scrollTo({
+        top: e
+      });
+    };
+  }, []), m(() => {
+    if (o && t.current && l) {
+      const e = window.innerWidth >= n.lg && window.innerWidth < n.xl ? 75 : 52;
+      window.scrollTo({
+        top: t.current.offsetTop - e
+      });
+    }
+  }, [o]), !t.current || !o ? null : f ? a.createPortal(/* @__PURE__ */ p(y, {
+    children: [i, /* @__PURE__ */ u("style", {
+      children: g
+    }), /* @__PURE__ */ u("style", {
+      children: O
     })]
-  }), t.current, "modal-node") : d.createPortal(r, t.current, "modal-node") : null;
+  }), t.current, "modal-node") : a.createPortal(i, t.current, "modal-node");
 };
 export {
-  V as ModalPortal
+  k as ModalPortal
 };

package/lib/ui/theme/constants.js

@@ -59,7 +59,7 @@ const N = {
   sm: 576,
   md: 768,
   lg: 992,
-  xl: 1215,
+  xl: 1200,
   xxl: 1440
 }, G = {
   landscape: "landscape",

package/lib/ui/theme/theme.js

@@ -1,8 +1,8 @@
 import { jsx as e, jsxs as r } from "react/jsx-runtime";
-import { breakpoints as i } from "./breakpoints.js";
-import { colors as l, FONT as t } from "./constants.js";
-const s = `
-  ${l}
+import { breakpoints as n } from "./breakpoints.js";
+import { colors as h, FONT as t } from "./constants.js";
+const l = `
+  ${h}
   --font-family: ${t.REGULAR};
   --font-regular: ${t.REGULAR};
   --font-color: ${t.COLOR};
@@ -11,6 +11,7 @@ const s = `
 
   --header-offset: 0px;
   --header-height: 68px;
+  --watch-live-header: 0px;
   --animation-duration: 0.5s;
   --animation-function: ease;
   --container-padding: 16px;
@@ -19,14 +20,15 @@ const s = `
   --max-width: 600px;
   --max-notifications-width: 400px;
 
-  ${i.down("xl")`
+  ${n.down("xl")`
     --header-offset: 56px;
+    --watch-live-header: 46px;
   `}
 
-  ${i.intermediate("xl", "lg")`
+  ${n.intermediate("xl", "lg")`
     --header-offset: 76px;
   `}
-`, m = "StreamLayerCSSReset", p = "ttkj0ah", x = () => /* @__PURE__ */ e("table", {
+`, p = "StreamLayerCSSReset", m = "ttkj0ah", x = () => /* @__PURE__ */ e("table", {
   children: /* @__PURE__ */ r("table", {
     children: [/* @__PURE__ */ e("thead", {
       children: /* @__PURE__ */ r("tr", {
@@ -37,22 +39,22 @@ const s = `
         })]
       })
     }), /* @__PURE__ */ e("tbody", {
-      children: s.split(";").map((o) => {
-        const n = o.trim(), [a, d] = n.split(":");
+      children: l.split(";").map((a) => {
+        const i = a.trim(), [o, d] = i.split(":");
         return /* @__PURE__ */ r("tr", {
           children: [/* @__PURE__ */ e("td", {
-            children: a
+            children: o
           }), /* @__PURE__ */ e("td", {
             children: d
           })]
-        }, n);
+        }, i);
       })
     })]
   })
 });
 export {
   x as ThemeVariables,
-  m as resetCss,
-  p as theme,
-  s as themeStr
+  p as resetCss,
+  m as theme,
+  l as themeStr
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamlayer/react-ui",
-  "version": "0.98.0",
+  "version": "0.98.1",
   "type": "module",
   "main": "./src/index.js",
   "typings": "./lib/index.d.ts",
@@ -44,16 +44,16 @@
     "react-virtualized-auto-sizer": "^1.0.21",
     "react-window": "^1.8.10",
     "react-window-infinite-loader": "^1.0.9",
-    "@streamlayer/feature-gamification": "^0.39.1",
-    "@streamlayer/sdk-web": "^0.33.1",
-    "@streamlayer/sdk-web-anonymous-auth": "^0.11.43",
-    "@streamlayer/sdk-web-analytics": "^0.1.1",
-    "@streamlayer/sdk-web-api": "^0.24.1",
-    "@streamlayer/sdk-web-core": "^0.22.1",
-    "@streamlayer/sdk-web-features": "^0.11.25",
+    "@streamlayer/feature-gamification": "^0.40.0",
+    "@streamlayer/sdk-web": "^0.33.2",
+    "@streamlayer/sdk-web-analytics": "^0.1.2",
+    "@streamlayer/sdk-web-anonymous-auth": "^0.11.44",
+    "@streamlayer/sdk-web-api": "^0.24.2",
+    "@streamlayer/sdk-web-core": "^0.22.2",
+    "@streamlayer/sdk-web-features": "^0.11.26",
     "@streamlayer/sdk-web-interfaces": "^0.21.0",
     "@streamlayer/sdk-web-logger": "^0.5.18",
-    "@streamlayer/sdk-web-notifications": "^0.15.0",
+    "@streamlayer/sdk-web-notifications": "^0.15.1",
     "@streamlayer/sdk-web-storage": "^0.4.5",
     "@streamlayer/sdk-web-types": "^0.23.0"
   },
@@ -96,6 +96,6 @@
     "vite-plugin-svgr": "^4.2.0",
     "vite-svg-loader": "^5.1.0",
     "vite-tsconfig-paths": "^4.3.1",
-    "@streamlayer/react": "^0.41.2"
+    "@streamlayer/react": "^0.41.3"
   }
 }