@streamlayer/react-ui 0.97.0 → 0.98.0

package/lib/ui/gamification/vote/win-bar/styles.js

@@ -1,42 +1,49 @@
 import { styled as s } from "@linaria/react";
 import { SvgIcon as n } from "../../../icons/index.js";
+import { GrowingShowIn as o } from "../../../show-in/index.js";
 import "react/jsx-runtime";
 import "react";
-const e = /* @__PURE__ */ s("div")({
+import "@linaria/core";
+const t = () => o, m = /* @__PURE__ */ s(t())({
+  name: "ShowInContainer",
+  class: "sie6cqo",
+  propsAsIs: !0
+}), I = /* @__PURE__ */ s("div")({
   name: "WinBarContainer",
-  class: "wie6cqo",
+  class: "wgizw4u",
   propsAsIs: !1
-}), c = /* @__PURE__ */ s("div")({
+}), f = /* @__PURE__ */ s("div")({
   name: "Content",
-  class: "cgizw4u",
+  class: "c1l3ucjp",
   propsAsIs: !1
-}), r = /* @__PURE__ */ s("div")({
+}), w = /* @__PURE__ */ s("div")({
   name: "Title",
-  class: "t1l3ucjp",
+  class: "tx7j799",
   propsAsIs: !1
-}), o = () => n, l = /* @__PURE__ */ s(o())({
+}), i = () => n, A = /* @__PURE__ */ s(i())({
   name: "WinIcon",
-  class: "wx7j799",
+  class: "w4lwuj0",
   propsAsIs: !0
-}), m = /* @__PURE__ */ s("div")({
+}), C = /* @__PURE__ */ s("div")({
   name: "Points",
-  class: "p4lwuj0",
+  class: "po9i64o",
   propsAsIs: !1
-}), I = /* @__PURE__ */ s("span")({
+}), u = /* @__PURE__ */ s("span")({
   name: "PointsCount",
-  class: "po9i64o",
+  class: "pe5g05h",
   propsAsIs: !1
-}), f = /* @__PURE__ */ s("span")({
+}), d = /* @__PURE__ */ s("span")({
   name: "PointsUnits",
-  class: "pe5g05h",
+  class: "p1hdtpmb",
   propsAsIs: !1
 });
 export {
-  c as Content,
-  m as Points,
-  I as PointsCount,
-  f as PointsUnits,
-  r as Title,
-  e as WinBarContainer,
-  l as WinIcon
+  f as Content,
+  C as Points,
+  u as PointsCount,
+  d as PointsUnits,
+  m as ShowInContainer,
+  w as Title,
+  I as WinBarContainer,
+  A as WinIcon
 };

package/lib/ui/modal/index.js

@@ -1,50 +1,52 @@
-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 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 "../../index-uEuzH3jr.js";
-const u = /* @__PURE__ */ a("div")({
+const p = /* @__PURE__ */ f("div")({
   name: "StaticContainer",
   class: "svm502q",
   propsAsIs: !1
-}), p = "fd3gza8", y = `
+}), v = "fd3gza8", x = `
   body {
     overflow: hidden !important;
   }
-`, v = `
+`, y = `
   .sl-hide-on-modal {
     display: none !important;
   }
-`, x = `
+`, h = `
   .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
+`, 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,
+  container: t,
+  fixedView: n,
+  useContainer: o
 }) => {
-  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", {
+  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
     })]
-  }), e.current, "modal-node") : i.createPortal(o, e.current, "modal-node") : null;
+  }), t.current, "modal-node") : d.createPortal(r, t.current, "modal-node") : null;
 };
 export {
-  P as ModalPortal
+  V 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamlayer/react-ui",
-  "version": "0.97.0",
+  "version": "0.98.0",
   "type": "module",
   "main": "./src/index.js",
   "typings": "./lib/index.d.ts",
@@ -44,15 +44,15 @@
     "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-analytics": "^0.1.0",
-    "@streamlayer/sdk-web": "^0.33.0",
-    "@streamlayer/sdk-web-anonymous-auth": "^0.11.42",
-    "@streamlayer/sdk-web-api": "^0.24.0",
-    "@streamlayer/sdk-web-features": "^0.11.24",
-    "@streamlayer/sdk-web-logger": "^0.5.18",
-    "@streamlayer/sdk-web-core": "^0.22.0",
+    "@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/sdk-web-interfaces": "^0.21.0",
+    "@streamlayer/sdk-web-logger": "^0.5.18",
     "@streamlayer/sdk-web-notifications": "^0.15.0",
     "@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.0"
+    "@streamlayer/react": "^0.41.2"
   }
 }