@streamlayer/react-ui 0.97.1 → 0.98.1

package/lib/ui/modal/index.js

@@ -1,50 +1,60 @@
-import { jsxs as c, jsx as n } from "react/jsx-runtime";
-import { cx as d } from "@linaria/core";
-import { styled as a } from "@linaria/react";
-import { useState as m, useCallback as f, useEffect as l } from "react";
-import { r as i } 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 u = /* @__PURE__ */ a("div")({
+const y = /* @__PURE__ */ h("div")({
   name: "StaticContainer",
   class: "svm502q",
   propsAsIs: !1
-}), p = "fd3gza8", y = `
-  body {
-    overflow: hidden !important;
-  }
-`, v = `
+}), g = `
   .sl-hide-on-modal {
-    display: none !important;
+    height: 0 !important;
+    opacity: 0 !important;
+    overflow: hidden !important;
   }
-`, x = `
+`, O = `
   .sl-pill-button {
-    display: none;
+    display: none !important;
   }
-`, h = (o) => {
-  const [e, r] = m(o), t = f(() => r(!1), []);
-  return l(() => (o && document.addEventListener("scroll", t), () => {
-    document.removeEventListener("scroll", t);
-  }), [o, t]), l(() => {
-    e === !1 && document.removeEventListener("scroll", t);
-  }, [e, t]), [e];
-}, P = ({
-  children: o,
-  container: e,
-  fixedView: r,
-  useContainer: t
+`, k = ({
+  children: i,
+  container: t,
+  useContainer: f
 }) => {
-  const [s] = h(r);
-  return e.current ? t ? i.createPortal(/* @__PURE__ */ c(u, {
-    className: d(s && p),
-    children: [o, s && /* @__PURE__ */ n("style", {
-      children: y
-    }), !s && /* @__PURE__ */ n("style", {
-      children: v
-    }), /* @__PURE__ */ n("style", {
-      children: x
+  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
     })]
-  }), e.current, "modal-node") : i.createPortal(o, e.current, "modal-node") : null;
+  }), t.current, "modal-node") : a.createPortal(i, t.current, "modal-node");
 };
 export {
-  P as ModalPortal
+  k as ModalPortal
 };

package/lib/ui/show-in/index.d.ts

@@ -1,9 +1,13 @@
-/// <reference types="react" />
-export declare const ShowIn: React.FC<{
+import React from 'react';
+type ShowInProps = {
     children: React.ReactNode | React.ReactNode[];
     style?: React.CSSProperties;
     className?: string;
     enabled?: boolean;
-    replayKey?: unknown;
     hiding?: boolean;
+};
+export declare const ShowIn: React.FC<ShowInProps>;
+export declare const GrowingShowIn: React.FC<ShowInProps & {
+    animate?: boolean;
 }>;
+export {};

package/lib/ui/show-in/index.js

@@ -1,30 +1,52 @@
-import { jsx as f } from "react/jsx-runtime";
-import { cx as u } from "@linaria/core";
-import { styled as g } from "@linaria/react";
-import { useState as p, useEffect as h } from "react";
-const w = /* @__PURE__ */ g("div")({
+import { jsx as c } from "react/jsx-runtime";
+import { cx as h } from "@linaria/core";
+import { styled as p } from "@linaria/react";
+import { useRef as l, useMemo as a } from "react";
+const w = /* @__PURE__ */ p("div")({
   name: "Container",
   class: "c1pgyo67",
   propsAsIs: !1
-}), S = "sx17qu6", d = "h1692c5m", v = ({
-  children: i,
-  style: n,
-  className: r,
+}), f = "sx17qu6", d = "h1692c5m", x = ({
+  children: r,
+  style: e,
+  className: t,
   enabled: o = !0,
-  replayKey: t,
-  hiding: e
+  hiding: s
+}) => /* @__PURE__ */ c(w, {
+  style: e,
+  className: h(t, o && f, o && s && d),
+  children: r
+}), y = () => x, C = /* @__PURE__ */ p(y())({
+  name: "GrowingContainer",
+  class: "gck55ev",
+  propsAsIs: !0
+}), G = ({
+  children: r,
+  style: e,
+  enabled: t,
+  animate: o,
+  ...s
 }) => {
-  const [m, s] = p(!0), c = o && m, a = o && e;
-  return h(() => {
-    t !== void 0 && (s(!1), requestAnimationFrame(() => {
-      s(!0);
-    }));
-  }, [t]), /* @__PURE__ */ f(w, {
-    style: n,
-    className: u(r, c && S, a && d),
-    children: i
+  const n = l(null), u = a(() => {
+    const m = n == null ? void 0 : n.current, i = m && window.getComputedStyle(m), g = i == null ? void 0 : i.getPropertyValue("height");
+    return t ? {
+      height: o ? g : 0
+    } : {};
+  }, [t, o]);
+  return /* @__PURE__ */ c(C, {
+    ...s,
+    enabled: t && o,
+    style: {
+      ...e,
+      ...u
+    },
+    children: /* @__PURE__ */ c("div", {
+      ref: n,
+      children: r
+    })
   });
 };
 export {
-  v as ShowIn
+  G as GrowingShowIn,
+  x as ShowIn
 };

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.97.1",
+  "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.0",
-    "@streamlayer/sdk-web": "^0.33.0",
-    "@streamlayer/sdk-web-analytics": "^0.1.0",
-    "@streamlayer/sdk-web-anonymous-auth": "^0.11.42",
-    "@streamlayer/sdk-web-api": "^0.24.0",
-    "@streamlayer/sdk-web-features": "^0.11.24",
+    "@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-core": "^0.22.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.1"
+    "@streamlayer/react": "^0.41.3"
   }
 }