@streamlayer/react-ui 0.99.0 → 0.100.0

package/lib/ui/gamification/vote/vote-option/styles.js

@@ -5,66 +5,71 @@ const r = /* @__PURE__ */ s("button")({
   class: "b1b6dl8t",
   propsAsIs: !1
 }), l = /* @__PURE__ */ s("div")({
-  name: "ButtonPct",
+  name: "ButtonPctWrap",
   class: "b4iik8i",
   propsAsIs: !1
-}), I = /* @__PURE__ */ s("span")({
-  name: "ButtonBody",
+}), I = /* @__PURE__ */ s("div")({
+  name: "ButtonPct",
   class: "b1gq1lnf",
   propsAsIs: !1
-}), i = /* @__PURE__ */ s("div")({
-  name: "IconContainer",
-  class: "i1j65z51",
+}), i = /* @__PURE__ */ s("span")({
+  name: "ButtonBody",
+  class: "b1j65z51",
   propsAsIs: !1
 }), m = /* @__PURE__ */ s("div")({
-  name: "IconWrap",
+  name: "IconContainer",
   class: "i19tpfua",
   propsAsIs: !1
+}), u = /* @__PURE__ */ s("div")({
+  name: "IconWrap",
+  class: "i1tubmma",
+  propsAsIs: !1
 }), n = /* @__PURE__ */ s("img")({
   name: "Icon",
-  class: "i1tubmma",
+  class: "i1grrgwj",
   propsAsIs: !1
 }), t = () => n, f = /* @__PURE__ */ s(t())({
   name: "IconDefault",
-  class: "i1grrgwj",
+  class: "ibemyq8",
   propsAsIs: !0
-}), a = () => n, u = /* @__PURE__ */ s(a())({
+}), a = () => n, A = /* @__PURE__ */ s(a())({
   name: "IconCircle",
-  class: "ibemyq8",
+  class: "i1dceht",
   propsAsIs: !0
-}), A = /* @__PURE__ */ s("span")({
+}), d = /* @__PURE__ */ s("span")({
   name: "Title",
-  class: "t1dceht",
+  class: "t116q4vq",
   propsAsIs: !1
-}), d = /* @__PURE__ */ s("span")({
+}), B = /* @__PURE__ */ s("span")({
   name: "Indicators",
-  class: "i116q4vq",
+  class: "i17ajcu2",
   propsAsIs: !1
 }), b = /* @__PURE__ */ s("span")({
   name: "Pts",
-  class: "p17ajcu2",
+  class: "pu9kmlb",
   propsAsIs: !1
-}), B = /* @__PURE__ */ s("span")({
+}), C = /* @__PURE__ */ s("span")({
   name: "Percentage",
-  class: "pu9kmlb",
+  class: "p1j2j0s0",
   propsAsIs: !1
-}), c = () => o, C = /* @__PURE__ */ s(c())({
+}), c = () => o, P = /* @__PURE__ */ s(c())({
   name: "CheckIcon",
-  class: "c1j2j0s0",
+  class: "c1mzj1sj",
   propsAsIs: !0
 });
 export {
-  I as ButtonBody,
+  i as ButtonBody,
   r as ButtonContainer,
-  l as ButtonPct,
-  C as CheckIcon,
+  I as ButtonPct,
+  l as ButtonPctWrap,
+  P as CheckIcon,
   n as Icon,
-  u as IconCircle,
-  i as IconContainer,
+  A as IconCircle,
+  m as IconContainer,
   f as IconDefault,
-  m as IconWrap,
-  d as Indicators,
-  B as Percentage,
+  u as IconWrap,
+  B as Indicators,
+  C as Percentage,
   b as Pts,
-  A as Title
+  d as Title
 };

package/lib/ui/modal/index.js

@@ -1,13 +1,13 @@
-import { jsxs as p, jsx as u } from "react/jsx-runtime";
-import { styled as h } from "@linaria/react";
-import { useState as w, useEffect as a } from "react";
-import { r as f } from "../../index-Bicco-Aq.js";
-import { BREAKPOINTS as n } from "../theme/constants.js";
-const y = /* @__PURE__ */ h("div")({
+import { jsxs as p, jsx as i } from "react/jsx-runtime";
+import { styled as w } from "@linaria/react";
+import { useState as c, useEffect as d } from "react";
+import { r as a } from "../../index-Bicco-Aq.js";
+import { BREAKPOINTS as u } from "../theme/constants.js";
+const h = /* @__PURE__ */ w("div")({
   name: "StaticContainer",
   class: "svm502q",
   propsAsIs: !1
-}), g = `
+}), y = `
   .sl-hide-on-modal {
     height: 0 !important;
     opacity: 0 !important;
@@ -17,43 +17,43 @@ const y = /* @__PURE__ */ h("div")({
   .sl-pill-button {
     display: none !important;
   }
-`, W = ({
-  children: i,
+`, m = () => window.innerWidth >= u.lg && window.innerWidth < u.xl ? 76 : 53, f = (o) => {
+  var e;
+  const t = m();
+  return Math.round((((e = o.current) == null ? void 0 : e.getBoundingClientRect().y) || 0) - t) <= 0;
+}, x = ({
+  children: o,
   container: t,
-  useContainer: m
+  useContainer: e
 }) => {
-  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 a(() => {
+  const [l] = c(() => f(t)), [n, s] = c(!1);
+  return d(() => {
     if (!t.current || !l)
       return s(!0), () => {
       };
-    const e = window.scrollY;
+    const r = 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
+      f(t) && window.scrollTo({
+        top: r,
+        behavior: "instant"
       });
     };
-  }, []), a(() => {
-    if (o && t.current && l) {
-      const e = window.innerWidth >= n.lg && window.innerWidth < n.xl ? 75 : 52;
+  }, []), d(() => {
+    if (n && t.current && l) {
+      const r = m();
       window.scrollTo({
-        top: t.current.offsetTop - e
+        top: t.current.offsetTop - r,
+        behavior: "instant"
       });
     }
-  }, [o]), !t.current || !o ? null : m ? f.createPortal(/* @__PURE__ */ p(y, {
-    children: [i, /* @__PURE__ */ u("style", {
-      children: g
-    }), /* @__PURE__ */ u("style", {
+  }, [n]), !t.current || !n ? null : e ? a.createPortal(/* @__PURE__ */ p(h, {
+    children: [o, /* @__PURE__ */ i("style", {
+      children: y
+    }), /* @__PURE__ */ i("style", {
       children: O
     })]
-  }), t.current, "modal-node") : f.createPortal(i, t.current, "modal-node");
+  }), t.current, "modal-node") : a.createPortal(o, t.current, "modal-node");
 };
 export {
-  W as ModalPortal
+  x as ModalPortal
 };

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

@@ -5,6 +5,7 @@ type ShowInProps = {
     className?: string;
     enabled?: boolean;
     hiding?: boolean;
+    onAnimationEnd?: React.AnimationEventHandler;
 };
 export declare const ShowIn: React.FC<ShowInProps>;
 export declare const GrowingShowIn: React.FC<ShowInProps & {

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

@@ -9,12 +9,14 @@ const w = /* @__PURE__ */ p("div")({
 }), f = "sx17qu6", d = "h1692c5m", x = ({
   children: r,
   style: e,
-  className: t,
+  className: n,
   enabled: o = !0,
-  hiding: s
+  hiding: s,
+  onAnimationEnd: t
 }) => /* @__PURE__ */ c(w, {
   style: e,
-  className: h(t, o && f, o && s && d),
+  className: h(n, o && f, o && s && d),
+  onAnimationEnd: t,
   children: r
 }), y = () => x, C = /* @__PURE__ */ p(y())({
   name: "GrowingContainer",
@@ -23,25 +25,25 @@ const w = /* @__PURE__ */ p("div")({
 }), G = ({
   children: r,
   style: e,
-  enabled: t,
+  enabled: n,
   animate: o,
   ...s
 }) => {
-  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 ? {
+  const t = l(null), u = a(() => {
+    const m = t == null ? void 0 : t.current, i = m && window.getComputedStyle(m), g = i == null ? void 0 : i.getPropertyValue("height");
+    return n ? {
       height: o ? g : 0
     } : {};
-  }, [t, o]);
+  }, [n, o]);
   return /* @__PURE__ */ c(C, {
     ...s,
-    enabled: t && o,
+    enabled: n && o,
     style: {
       ...e,
       ...u
     },
     children: /* @__PURE__ */ c("div", {
-      ref: n,
+      ref: t,
       children: r
     })
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamlayer/react-ui",
-  "version": "0.99.0",
+  "version": "0.100.0",
   "type": "module",
   "main": "./src/index.js",
   "typings": "./lib/index.d.ts",
@@ -36,7 +36,7 @@
   ],
   "peerDependencies": {
     "@lottiefiles/react-lottie-player": "^3.5.3",
-    "@streamlayer/sl-eslib": "^5.84.0",
+    "@streamlayer/sl-eslib": "^5.85.0",
     "@types/lodash.throttle": "^4.1.9",
     "lodash.throttle": "^4.1.1",
     "nanoid": "3.3.7",
@@ -44,18 +44,18 @@
     "react-virtualized-auto-sizer": "^1.0.24",
     "react-window": "^1.8.10",
     "react-window-infinite-loader": "^1.0.9",
-    "@streamlayer/feature-gamification": "^0.40.1",
-    "@streamlayer/sdk-web": "^0.33.3",
-    "@streamlayer/sdk-web-analytics": "^0.1.3",
-    "@streamlayer/sdk-web-anonymous-auth": "^0.11.45",
-    "@streamlayer/sdk-web-api": "^0.24.3",
-    "@streamlayer/sdk-web-core": "^0.22.3",
-    "@streamlayer/sdk-web-features": "^0.11.27",
-    "@streamlayer/sdk-web-interfaces": "^0.21.1",
-    "@streamlayer/sdk-web-logger": "^0.5.19",
-    "@streamlayer/sdk-web-notifications": "^0.15.2",
-    "@streamlayer/sdk-web-storage": "^0.4.6",
-    "@streamlayer/sdk-web-types": "^0.23.1"
+    "@streamlayer/feature-gamification": "^0.41.0",
+    "@streamlayer/sdk-web": "^0.33.4",
+    "@streamlayer/sdk-web-analytics": "^0.2.0",
+    "@streamlayer/sdk-web-anonymous-auth": "^0.11.46",
+    "@streamlayer/sdk-web-api": "^0.25.0",
+    "@streamlayer/sdk-web-core": "^0.23.0",
+    "@streamlayer/sdk-web-features": "^0.11.28",
+    "@streamlayer/sdk-web-interfaces": "^0.22.0",
+    "@streamlayer/sdk-web-logger": "^0.5.20",
+    "@streamlayer/sdk-web-notifications": "^0.16.0",
+    "@streamlayer/sdk-web-storage": "^0.4.7",
+    "@streamlayer/sdk-web-types": "^0.23.2"
   },
   "nx": {
     "implicitDependencies": [
@@ -71,12 +71,11 @@
     "@linaria/core": "^6.0.0",
     "@linaria/react": "^6.0.0",
     "@nanostores/react": "^0.7.2",
-    "@storybook/addon-docs": "^8.0.0",
-    "@storybook/addon-styling": "^1.3.7",
-    "@storybook/addon-viewport": "^8.0.0",
-    "@storybook/blocks": "^8.0.0",
+    "@storybook/addon-docs": "^8.0.1",
+    "@storybook/addon-viewport": "^8.0.1",
+    "@storybook/blocks": "^8.0.1",
     "@storybook/jest": "~0.2.3",
-    "@storybook/react": "^8.0.0",
+    "@storybook/react": "^8.0.1",
     "@storybook/testing-library": "~0.2.2",
     "@types/react-infinite-scroller": "^1.2.5",
     "@types/react-window": "^1.8.8",
@@ -96,6 +95,6 @@
     "vite-plugin-svgr": "^4.2.0",
     "vite-svg-loader": "^5.1.0",
     "vite-tsconfig-paths": "^4.3.2",
-    "@streamlayer/react": "^0.41.4"
+    "@streamlayer/react": "^0.41.5"
   }
 }

package/lib/ui/gamification/vote/expired-alert/index.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-type ExpiredAlertProps = {
-    title: string;
-    description: string;
-};
-export declare const ExpiredAlert: React.FC<ExpiredAlertProps>;
-export {};

package/lib/ui/gamification/vote/expired-alert/index.js

@@ -1,11 +0,0 @@
-import { jsxs as o, jsx as r } from "react/jsx-runtime";
-import { SvgIcon as c } from "../../../icons/index.js";
-import { Container as n, Title as t, Description as m } from "./styles.js";
-const d = ({ title: e, description: i }) => /* @__PURE__ */ o(n, { children: [
-  /* @__PURE__ */ r(c, { name: "icon-check-circle" }),
-  /* @__PURE__ */ r(t, { children: e }),
-  /* @__PURE__ */ r(m, { children: i })
-] });
-export {
-  d as ExpiredAlert
-};